在很多大网站上为了提高用户方便阅读文字，都提供有字体大小选择功能，以适应不同年龄段人群的阅读需求，其实这种功能实现起来也很简单，修改起来也方便，字体大号由你来定，默认字体大小可以CSS页面中定义，一般网页的标准字体是9pt，也就是12px；
实例代码一：
< !DOCTYPE html > < html > < head > < title >修改字体大小.html< /title > < meta http-equiv="keywords" content="keyword1,keyword2,keyword3" > < meta http-equiv="description" content="this is my page" > < meta http-equiv="content-type" content="text/html; charset=UTF-8" > < !--< link rel="stylesheet" type="text/css" href="./styles.css" >-- > < style 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" > //此种方式降低了js和CSS的耦合性 function changeFontSize(fontStyle){ // 获取节点对象 var divNode = document.getElementsByTagName("div")[0]; // 设置该节点的Name属性以及属性值 divNode.className=fontSize; } /* function changeFontSize2(fontSize){ // 获取节点对象 var divNode = document.getElementsByTagName("div")[0]; divNode.style.fontSize=fontSize; } */ < /script > < /head > < body > < 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')" >小号< /a > < div > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > 这里呢就是显示的文字，通过点击上面的超链接改变此字体大小< br/ > < /div > < /body > < /html >
实例方法二：
< html >< head >< title >JavaScript设置网页字体< /title >< style >body{font-size:9pt;}< /style >< /head >< body >< div id=zoom >这是一段示例文字，你可以点击下边选择不同字号的字体，这段文字会随即改变大小。。< /div >< SCRIPT language=JavaScript >function doZoom(size){document.getElementById('zoom').style.fontSize=size+'pt'}< /SCRIPT >< P align=right >选择字号：[ < A href="javascript:doZoom(13)" >13pt（超大）< /A > < A href="javascript:doZoom(10.5)" >10.5pt（中型）< /A > < A href="javascript:doZoom(9)" >9pt（标准）< /A > ]< /body >< /html >