如何给网站文章页添加A+缩放字号按钮

我们看到一些网站的文章页面标题旁边,有一个A+图标，点击便可以放大文章内容的字体字号，A-按钮则缩小回原来默认设置，对于近视800度的用户再也不用盯着屏幕看的眼花了，这点用户体验还是挺不错的，具体是这样的形式演示请参照知更鸟主题或者以下图片展示！

如何给网站文章页添加A+缩放字号按钮？方法非常简单（代码整自知更鸟），就三个步骤完美解决问题。第一步先在你的网站主题文章页single.php模板中添加展示按钮的代码，我这里就把以下代码放在标题下的时间分类的信息栏后，至于你想放哪自己调整即可，记住这个id=”fontsize”，下面CSS样式接JS解释用到。

<ul id="fontsize"><li>A+</li></ul>

给网站添加A+缩放字号按钮第二步，给这个按钮添加CSS样式，加在你的主题style.css文件，有的是main.css里面；至于要怎么调整你自己敲下CSS吧；这里依然贴出我改的样式，我把它放到整个文章页面左上角。

/** 字号 **/
#fontsize {
position: absolute;
top: 3px;
left: 3px;
line-height: 24px;
width: 40px;
text-align: center;
padding: 0 0 1px 0;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 2px;
}

#fontsize:hover {
color: #fff;
background: #3690cf;
border: 1px solid #3690cf;
}

.fontsmall {
font-size: 18px;
font-size: 1.8rem;
}

.fontlarge {
}

/** END **/

给网站添加缩放字体大小按钮第三步，加个JS控制按钮控制字体大小展示立马搞定。这里我在single.php后footer前添加。这里第二行的#fontsize即是控制上面的按钮，然后把代码第四行.article-content改为你要控制字体大小的区域class类，其它不用动。

<script type="text/javascript">

$("#fontsize").click(function() {
var _this = $(this);
var _t = $(".article-content");
var _c = _this.attr("class");
if (_c == "size_s") {
_this.removeClass("size_s").addClass("size_l");
_this.text("A+");
_t.removeClass("fontsmall").addClass("fontlarge");
} else {
_this.removeClass("size_l").addClass("size_s");
_this.text("A-");
_t.removeClass("fontlarge").addClass("fontsmall");
};
});

</script>