
我们看到一些网站的文章页面标题旁边,有一个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>
你这网站改的挺有意思 哈哈
@李峰博客 哈哈!你的网站也非常不错呀!
其实主要站点设置的字体大小合理,一般很少有人会去点击这个调整字体的按钮,除非遇到有老年人访问,需要放大字体。
@boke112联盟 有道理!
这是干货啊,支持