王尘宇

众口难调，网页上正文的字体大小平常在12px~16px之间，但是很多的老年朋侪却由于看不到字而苦恼。虽然有网页缩放这一功用，但一是不能用一般的体式格局浏览网页、二是会让图片由于放大而变得非常隐约。所以最好的要领就是：旅客能够直接按下网站上的“放大”“减小”按钮调解网页上的字体大小，如今我们能够将此小功用集成到WordPress中。

完成代码示例

将此JS代码增加到single.php中：

1. <script type="text/javascript">

2. function doZoom(size) {

3. var zoom = document.all ? document.all['entry'] : document.getElementById('entry');

4. zoom.style.fontSize = size + 'px';

5. }

6. </script>

须要注重的是，上面的entry指的是正文内容的div id，必需依据主题的实际情况举行修正。

前台代码示例

增加至适宜的位置即可。

HTML：

1. <div id="fschange">

2. <span id="font_title">字号：</span>

3. <span id="fs_dec"><a href="javascript:doZoom(12)" title="减少">-</a></span>

4. <span id="fs_n"><a href="javascript:doZoom(14)" title="恢复">o</a></span>

5. <span id="fs_inc"><a href="javascript:doZoom(16)" title="增大">+</a></span>

6. </div>

CSS：

1. /* fschange */

2. #fschange {float:rightright; margin:0; padding:0;}

3. #fschange #font_title{margin-top:2px;}

4. #fschange span {display:inline; float:left; margin-left:4px;}

5. #fschange span a {border-bottom:#c8c8c8 1px solid; text-align:center; border-left:#c8c8c8 1px solid; width:16px; display:block; height:18px; border-top:#c8c8c8 2px solid; border-right:#c8c8c8 1px solid;}

6. #fschange span a:hover {background:#ebebeb; text-decoration:none;}