【Hexo】自定义字体

声明：非商免字体未经授权仅限个人使用，不得用于商业用途！

以下 [blogRoot] 为你的博客根目录

  1. 准备好字体文件后，在[BlogRoot]\source\css\custom.css（没有就自己创建）中添加以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @font-face {
      /* 为载入的字体取名字(随意) */
      font-family: 'YSHST';	
      /* 字体文件地址(相对或者绝对路径都可以) */
      src: url(/font/优设好身体.woff2);
      /* 定义加粗样式(加粗多少) */
      font-weight: normal;
      /* 定义字体样式(斜体/非斜体) */
      font-style: normal;
      /* 定义显示样式 */
      font-display: block;
    }

  2. 各个属性的定义：

    1. font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
    2. src属性值中首先指定了字体文件所在的路径。
    3. format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
    4. font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
    5. 支持格式：.eot(老版本IE)，.otf，.ttf，.woff，*.woff2(推荐)
    6. font-display: 一般为 swap

  3. 在主题配置文件_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Global font settings
    # Don't modify the following settings unless you know how they work (非必要不要修改)
    font:
      global-font-size: '15px'
      code-font-size: '14px'
      font-family: YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
      code-font-family: Consolas, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

    # 左上角網站名字 主頁居中網站名字
    blog_title_font:
      font_link: 
      font-family: YSHST, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif

  4. 重启项目即可看到

    1
    hexo cl; hexo s