WordPress前台调整字体大小

很实用的一种效果,因为有童鞋需要,所以详细介绍一下!

 

首先放出效果图,其实就是 Melody 右下角的字体调整按钮。从左到右依次为字体缩小,还原默认字体,字体放大。

 

下面放出代码后大家就会发现代码量很少,并且已加上注释,很方便修改。

 

功能是用 jQuery 写的,因此需要加载 jQuery 库!之前有童鞋说加入代码后没有效果,可能是没有加载 jQuery 库的缘故,请确保主题中已加载 jQuery 库!

 

首先是 HTML ,在需要添加调整字体大小按钮的地方加上,如果像 Melody 那样改变除首页外每个页面正文的字体大小,可以在 header.php 和 footer.php 中加入这段 HTML ,并且在 jQuery 代码的选择器中(下文注释中有)选择一个合适的选择器,一般是 “entry” , “content” 这类代表正文内容部分的选择器。如只需要改变文章页正文字体大小,则在 single.php 中加入!

<div id="fschange">
    <span id="font_title">字体大小</span>
    <span id="fs_dec"><a href="#" title="change smaller geilivable!">&nbsp -</a></span>
    <span id="fs_n"><a href="#" title="original size">&nbsp N</a></span>
    <span id="fs_inc"><a href="#" title="change larger geilivable">&nbsp +</a></span>
</div>

 

然后是 jQuery 代码,加入到 js 文件中

jQuery(document).ready(function($){
//调节字体大小
    $('#fschange span').click(function() {
        // 选择器
        var selector='.entry,.entry p';
        // 每次增加字体大小
        var increment=2;
        // 默认字体大小
        var font_size = 14;
        // 获取当前字体大小和单位
        var fs_css = $(selector).css('fontSize');
        var fs_css_c = parseFloat( fs_css, 10);
        var fs_unit = fs_css.slice(-2);       
        var id = $(this).attr('id');
        switch(id) {
        case 'fs_dec': fs_css_c -= increment; break;
        case 'fs_inc': fs_css_c += increment; break;
        default: fs_css_c = font_size;     
        }
        $(selector).css('fontSize', fs_css_c + fs_unit);
        return false;
    });
});

 

在放大和缩小字体的时候,本身并没有任何限制,你完全可以把字体放大到占满屏幕又或者是一个圆点那么小,不过某些浏览器有字体最小限制,如 chrome 就把网页最小字体限制在 12px 。

 

最后来个夸张点的效果图

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/jquery-change-the-font-size.html

评论列表

  • 评论者头像
    回复

    真的很好用啊 很多人的博客是修改的英文版主题,字体都很小

    • 评论者头像
      回复

      @Louis Han 嗯嗯,特别对于大分辨率的屏幕,小字看上去更小,放大了就看得舒服!

  • 评论者头像
    回复

    嘿嘿,學弟我過來觀摩了。
    字體放大縮小的功能很實用。
    考慮修改中。

    • 评论者头像
      回复

      @Leyar 亲,不用考虑了,果断修改吧!
      现在修改还送详细指导! :mrgreen:

  • 评论者头像
    回复

    很多的博客現在都用了這功能麼。

    • 评论者头像
      回复

      @Demon 好像也没有看到很多人用这个功能,一般默认字体小的WordPress主题加上这个功能会方便点!

  • 评论者头像
    回复

    小说站用这个功能会很合适,,一般13px比较合适了

    • 评论者头像
      回复

      @云刊 嗯嗯,有大量文字的网站用这个功能效果会更加明显!

  • 评论者头像
    回复

    这个在实际的使用中还是蛮方便的 有时读者可以根据自己的需要选择字体大小
    更人性化了 对于用户体验来说 挺好的

    • 评论者头像
      回复

      @心淡若水 嗯嗯,特别是不同分辨率的设备可以根据自己的分辨率调整字体大小,看得更舒服了!

  • 评论者头像
    回复

    这招不错

  • 评论者头像
    回复

    这个…不喜欢用…通常直接固定了。如果不够大就直接ctrt+放大 :idea:

    • 评论者头像
      回复

      @kkStx ctrl

    • 评论者头像
      回复

      @kkStx 字体缩放的功能其实主要不是自己使用的,主要是方便浏览自己网站的人,可以把字体调整为看得舒服的字型!

  • 评论者头像
    回复

    放弃备案,搬回米国服务器哦。

  • 评论者头像
    回复

    嗯,这个已经有了,很实用。

  • 评论者头像
    回复

    这个方法不错,可以自由切换。

  • 评论者头像
    回复

    有时候字大了,显得文章很长,让人不想看

    希望能够互访~(点名字能够进入)

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail