我的电脑上已经安装了 “思源宋体 CN” ，”文悦古典明朝体” 与 “Fira Code”
但将它们直接设为博客字体的话，电脑没有安装这些字体的访客将无法看到，博客的美观程度也会大打折扣
这时我们就需要使用网络在线字体让每一个访客都能浏览到使用这些字体的美观网页

我将以本博客的主题 (hexo-theme-yun) 为例，教大家修改字体

原理

起初，网页设计师创造互联网的天地

字体使用是空虚单调，”web-safe”

设计师说：“要有在线字体。”，于是 CSS 就有了 @font-face

在 CSS 的 @font-face 规则出现之前，网页设计需要选择大部分人电脑都安装的字体
这能保证网页中字体正常显示，不过网页也是千篇一律，难谈美观

“仓廪实而知礼节，衣食足而知荣辱”
伴随着互联网个性化的不断发展，在网页上显示本机未安装字体的呼声日益强烈
于是 CSS 推出了 @font-face 规则，它允许网页开发者为其网页指定在线字体
这样就消除了网页字体对用户电脑字体的依赖

Yun 主题博客使用在线字体的原理正是使用 @font-face

用法

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-display: swap;
    src: url('https://upyun.dogeshadow.top/site/FiraCode-VF.woff2') format('woff2');
}

@font-face {
    font-family: "思源宋体 CN";
    font-style: normal;
    font-display: swap;
    src: url('https://upyun.dogeshadow.top/site/SourceHanSerifCN-Medium-6.woff2') format('woff2');
}

@font-face {
    font-family: "文悦古典明朝体 (非商业使用)";
    font-style: normal;
    font-display: swap;
    src: url('https://upyun.dogeshadow.top/site/WenYue-GuDianMingChaoTi-NC-W5.woff2') format('woff2');
}
  • font-family: 字体名称，win10 可以双击字体文件预览得到
    字体名称中间有空格的时候，一般还需要再加一层单引号
    注意：一些中文字体的名称并非以”体”结尾，如
    • 思源宋体的名称是 “思源宋体 CN”
    • 文悦古典文明体的名称是 “文悦古典明朝体 (非商业使用)”，括号必须是英语括号且括号前有空格

  • font-style: normal / italic / oblique 正常 / 斜体 / 倾斜
    italic 使用字体本身的斜体属性，oblique 使没有斜体属性的字体倾斜
  • font-weight: 字重，字体粗细。有不同的表示方法，可以相互转换，如
    W5 == Medium == 500
  • src: 在线字体的地址，可以将字体存进对象存储服务或使用 Google Fonts api
    woff2 是最新一代的在线字体，不同浏览器兼容最好，体积也小加载快
    一般将其他字体 (otf,ttf,woff) 转成 woff2 可以获得更好的体验
  • font-display: 有关浏览器加载字体的方式。auto / swap / fallback
    浏览器加载在线字体速度上比不过加载本机字体，在加载完字体之前怎样显示？有三种方式
    • auto: 默认方式。字体加载完成之前先不显示该字体的文本
    • swap: 字体加载完成之前先使用备用字体显示该字体的文本
    • fallback: auto 与 swap 折中。加载前 100ms 先不显示文本，超过后用备用字体显示文本
    • optional: 与 fallback 差不多，不同:如果加载速度很慢，则一直使用备用字体

实际操作

根据Yun主题文档，使用在线字体需要在 head 里引入写有 @font-face 的 css 文件再引用

步骤

  1. 将用到的字体统一转成 woff2 格式，上传到云存储服务 (我使用的是又拍云云存储)

  2. 写一个 css 文件，内容是对这些字体的 @font-face 引用，将文件上传至云存储 or CDN

  3. 对 Blog/_config.yun.yml 进行调整，添加

    head:
  css:
    fonts: https://upyun.dogeshadow.top/site/fonts.css # css文件地址

font:
  cdn:
    enable: true
    lib:
      - https://upyun.dogeshadow.top/site/fonts.css # css文件地址
  serif:
    family: "'文悦古典明朝体 (非商业使用)'"
    weight: 500
  sans_serif:
    family: "Fira Code, '思源宋体 CN'"
    weight: 500
  monospace:
    family: "Fira Code"

  4. 大功告成，hexo clean && hexo g && hexo d 看看效果吧

注意事项

  • 只有可变粗细的字体 (比如 Fira Code VF) 可以设置任意字重
    字重已经确定的字体不用额外设置字重 (设置了也没用)
  • 不用 woff2 格式字体也行，不过有的浏览器不兼容，且大小更大，加载更慢