如上圖所示，在zblogPHP一個(gè)模板上增加的字號(hào)調(diào)節(jié)功能，可以改變文章字體的大中小，提高用戶體驗(yàn)度！
那么上圖所示案例如何實(shí)現(xiàn)的呢？
最簡(jiǎn)單的方法：
<html>
<head>
<title>JavaScript設(shè)置網(wǎng)頁(yè)字體</title>
<style>
body{
font-size:9pt;
}
</style>
</head>
<body>
<div id=zoom>這是一段示例文字，你可以點(diǎn)擊下邊選擇不同字號(hào)的字體，這段文字會(huì)隨即改變大小。腳本之家。</div>
<SCRIPT language=JavaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'pt'
}
</SCRIPT>
<P align=right>選擇字號(hào)：[ <A
href="javascript:doZoom(13)">13pt（超大）</A> <A
href="javascript:doZoom(10.5)">10.5pt（中型）</A> <A
href="javascript:doZoom(9)">9pt（標(biāo)準(zhǔn)）</A> ]
</body>
</html>使用的是pt，而有時(shí)可以使用px，字號(hào)也可以預(yù)先設(shè)置大小！
非常方便！
還有一個(gè)案例，比較復(fù)雜一些，本人也沒(méi)有測(cè)試過(guò)，如果之前的案例你不滿意，也可以考慮使用下方這個(gè)案例去設(shè)置字號(hào)的調(diào)節(jié)：
<!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){
// 獲取節(jié)點(diǎn)對(duì)象
var divNode = document.getElementsByTagName("div")[0];
// 設(shè)置該節(jié)點(diǎn)的Name屬性以及屬性值
divNode.className=fontSize;
}
/*
function changeFontSize2(fontSize){
// 獲取節(jié)點(diǎn)對(duì)象
var divNode = document.getElementsByTagName("div")[0];
divNode.style.fontSize=fontSize;
}
*/
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="changeFontSize2('20px')" class="max">大號(hào)</a>
<a href="javascript:void(0)" onclick="changeFontSize2('16px')" class="moren">中號(hào)</a>
<a href="javascript:void(0)" onclick="changeFontSize2('12px')" class="min">小號(hào)</a>
<div>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
這里呢就是顯示的文字，通過(guò)點(diǎn)擊上面的超鏈接改變此字體大小<br/>
</div>
</body>
</html>