In order to improve users on many large websites, they provide font size selection functions to meet the reading needs of people in different ages. In fact, this function is also very simple to implement. To determine, the default font size can be defined in the CSS page. The standard font of the general webpage is 9PT, which is 12px;
Example code 1:
<! Doctype html> <html> <head> <Title> Modify the size of the font .html </title> <meta http-equiv = "keywords" content = "keyword1, keyword3"> <meta http-ee Quiv = "Descripting "Content =" this is my page "> <meta http-equiv =" content-type "content =" text/html; charset = utf-8 "> <!- <link rel =" type = "test /css "href =" ./ styles.css ">-> <alle type =" text/css "> div {border: 1px red solid; width: 455px; font-size: 16px;} .max {font- size: 20px;} .moren {font-size: 16px;} .min {font-size: 12px;} </style> <script type = "text/javascript"> // This method reduced JS and CSS of JS and CSS. Coupling Function Changefontsize (FontStyle) {// Get the node object VAR DIVNODE = DOCUMENT.GELEMELEMENTSBYTAGNAME ("DIV") [0]; // Set the Name attribute of the node. e = fontSize;} /* Function Changefontsize2 (fontsize) {// Get the node object var during division = document.Getelementsbytagname ("DIV") [0]; Divnode.style.fontsize = fontsize; > <A href = "javascript:void(0)" onclick="changeFontSize2('20px')">大号</a> <a href="javascript:void(0)" onclick="changeFontSize2('16px')">中号</a> <a href = "javascript: void (0)" OnClick = "Changefontsize2 ('12px')"> Tombs </a> <di> Here is the text displayed. The size of this font <br/> Here is the displayed text. You can change the size of the font by clicking the above hyperlinks. <br/> Here is the displayed text, and the size of the font is changed by clicking above. <br/> Here Where is the displayed text? By clicking the above hyperlink to change this font size. This is the displayed text. The size of the font is changed by clicking the above super link. <br/> Here is the displayed text. By clicking The above hyperlink changes this font size. <br/> Here is the displayed text. The size of the font is changed by clicking the above hyperlink. <br/> Here is the displayed text. The size of the font is changed by clicking the above hyperlink. <br/> Here is the displayed text. The size of the font is changed by clicking the above hyperlink. <br/> Here is the displayed text. The size of this font is changed by clicking above. <br/> Here is the display. In text, change this font size by clicking the above hyperlink <br/> </div> </body> </html>Example method two:
<HTML> <Head> <Title> JavaScript Settings Font </Title> <STYLE> Body {FONT-SIZE: 9pt;} </style> </head> <body> <div ID = zoom> This is an example of an example. Text, you can click below to select the fonts of different font samples. This text will immediately change the size. Wulin.com. </div> <script language = javascript> function dozoom (size) {document.GetelementByid ('zoom'). Style.fontsize = size+'pt'} </scrift> <p a LIGN = RIGHT> Select Font size: [<A href = "javascript: dozoom (13)"> 13pt (ultra -large) </a> <a href = "javascript: dozoom (10.5)"> 10.5pt (medium) </a> <a href = "javascript: dozoom ( 9) "9pt (Standard) </a>] </body> </html>