文章页面增加字体缩放按钮

public/javascripts/article.js

@@ -55,6 +55,51 @@
         });
     });
 
+    var fontSelectors = [
+        '.post-title h1',
+        '.post-content blockquote',
+        '.post-content blockquote h2',
+        '.post-content h2',
+        '.post-content h3',
+        '.post-content pre'
+    ];
+
+    //缩小字体
+    $(".btn-font-minus").on("click", function () {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
+        var bodyFontSize = parseInt($('body').css('fontSize')) - 2;
+        $('body').css('fontSize', bodyFontSize + 'px');
+        fontSelectors.forEach(function (selector) {
+            $(selector).css('fontSize', (parseInt($(selector).css('fontSize')) - 2) + 'px');
+        });
+        if (bodyFontSize <= 12) {
+            $(this).addClass('disabled');
+        }
+        if ($(".btn-font-plus").hasClass('disabled')) {
+            $(".btn-font-plus").removeClass('disabled');
+        }
+    });
+
+    //增大字体
+    $(".btn-font-plus").on("click", function () {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
+        var bodyFontSize = parseInt($('body').css('fontSize')) + 2;
+        $('body').css('fontSize', bodyFontSize + 'px');
+        fontSelectors.forEach(function (selector) {
+            $(selector).css('fontSize', (parseInt($(selector).css('fontSize')) + 2) + 'px');
+        });
+        if (bodyFontSize >= 36) {
+            $(this).addClass('disabled');
+        }
+        if ($(".btn-font-minus").hasClass('disabled')) {
+            $(".btn-font-minus").removeClass('disabled');
+        }
+    });
+
     //改变窗口大小后，重置目录，以修正各标题的定位
     $(window).on("resize", function () {
         $.fn.scrollNav("resetPos");

public/stylesheets/site.css

@@ -1285,6 +1285,7 @@ img.wechat-img {
     margin-top: 110px;
     margin-left: 197px;
     padding: 2px 6px;
+    font-size: 14px;
 }
 
 .close-menu:hover {
@@ -1292,6 +1293,7 @@ img.wechat-img {
 }
 
 .btn-menu {
+    height: 40px;
     position: fixed;
     margin-top: -41px;
     border-color: #e7eaec;
@@ -1304,6 +1306,57 @@ img.wechat-img {
     border-color: #ccc;
 }
 
+.font-controller {
+    position: fixed;
+    width: 40px;
+    margin-left: -70px;
+    margin-top: -41px;
+    background: #fff;
+    transition: none;
+}
+
+.font-controller .btn-font {
+    float: left;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border: 1px solid #e7eaec;
+    user-select: none;
+    font-size: 14px !important;
+}
+
+.font-controller .btn-font:hover {
+    cursor: pointer;
+    border-color: #ccc;
+}
+
+.font-controller .btn-font:active {
+    background-image: none;
+    outline: 0;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+}
+
+.font-controller .btn-font.disabled {
+    border-color: #ccc;
+    filter: alpha(opacity=35);
+    opacity: .35;
+}
+
+.font-controller .btn-font.disabled:hover {
+    cursor: not-allowed;
+}
+
+.font-controller .btn-font.disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.font-controller .btn-font-minus {
+    border-bottom-color: transparent;
+}
+
 .post-content h2 {
     background: #fbfbfb none repeat scroll 0 0;
     border-left: 4px solid #39c;

views/blog/article.html

@@ -8,6 +8,10 @@
                 <button title='@__("blog.article.table_of_content")' class="btn btn-white btn-menu">
                     <i class="fa fa-align-justify"></i>
                 </button>
+                <div class="font-controller hidden-sm hidden-xs">
+                    <div title="缩小字体" class="btn-font btn-font-minus">A-</div>
+                    <div title="增大字体" class="btn-font btn-font-plus">A+</div>
+                </div>
                 <div class="hidden-sm hidden-xs">
                     <div class="text-muted pull-left">
                         <span title='@__("blog.article.category")'>