美文网首页
Hexo更换为Google Fonts思源宋体!

Hexo更换为Google Fonts思源宋体!

作者: 霸气龙先森 | 来源:发表于2019-07-18 16:12 被阅读0次

    对于中文书籍来说,宋体一直是正文印刷的标准字体,而不是目前电子显示屏上普遍的黑体,因为宋体的衬线更适合长时间阅读

    本文是针对Hexo博客的NexT主题来设置的,不是这个的小伙伴们也可以参照着来看!

    修改字体

    修改配置文件中的参数

    修改配置文件_config.yml ,找到font将下列代码中红色的部分修改成绿色的部分即可。可以根据实际情况稍作修改!

    文件位置:~/blog/themes/next/_config.yml

    font:

    - enable: false

    + enable: true

      # Uri of fonts host, e.g. //fonts.googleapis.com (Default).

      # Uri字体主机,例如//fonts.googleapis.com(默认)。

    + host: https://fonts.loli.net

      # Font options:字体选项:

      # `external: true` will load this font family from `host` above.

      # `family: Times New Roman`. Without any quotes.

      # `size: xx`. Use `px` as unit.

      # Global font settings used for all elements in <body>.

      # 用于<body>中所有元素的全局字体设置。

      global:

        external: true

    +  family: Noto Serif SC

        size:

      # Font settings for Headlines (H1, H2, H3, H4, H5, H6).

      # 标题的字体设置(H1,H2,H3,H4,H5,H6)。

      # Fallback to `global` font settings.

      # 回退到`global`字体设置。

      headings:

        external: true

    +  family: Noto Serif SC

        size:

      # Font settings for posts.帖子的字体设置

      # Fallback to `global` font settings.回退到`global`字体设置。

      posts:

        external: true

    +  family: Noto Serif SC

      # Font settings for Logo.LOGO的字体设置。

      # Fallback to `global` font settings.回退到`global`字体设置。

      logo:

        external: true

    +  family: Noto Serif SC

        size:

    修改配置文件

    找到主题的base.styl文件,具体位置为~/blog/themes/next/source/css/_variables/base.styl,然后修改相关数据!

    文件位置:~/blog/themes/next/source/css/_variables/base.styl

    -$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace

    +$font-family-monospace    = consolas, Menlo, $font-family-base, monospace

    -$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')

    +$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')

    自定义项目

    设置字体大小

    如果你看不习惯默认(原来)的字体大小的话,你可以尝试修改它!

    文件位置:~/blog/themes/next/source/css/_variables/base.styl

    // Font size

    $font-size-base          = 14px //改成你想要的即可!

    设置字体颜色

    没错,你甚至可以设置不同的颜色!

    文件位置:~/blog/themes/next/source/css/_custom/custom.styl

    //修改字体颜色

    body {

        color: <在这里填上你想要的颜色,如:#000>; //别漏了分号!

    }

    本文参考自reuixiy的Google Fonts已支持思源宋体!点击即可访问!


    微信公众号:爪哇派生

    QQ群:821557332

    个人网站(博客):https://www.52bess.com

    GitHub:https://github.com/besscroft

    如果您想支持和鼓励我一下,欢迎打赏哦!

    *版权声明:版权归作者本人所有,尊重原创,推送文章除非无法确认,都会注明作者和来源。如果出处有误或侵犯到原作者权益,实属无心之举,请务必与我联系删除或授权事宜。本简书号所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处

    相关文章

      网友评论

          本文标题:Hexo更换为Google Fonts思源宋体!

          本文链接:https://www.haomeiwen.com/subject/wlwllctx.html