全站字体修改

说明

在使用谷歌网页速度测试优化网站的过程中，提示我应该“确保文本在网页字体加载期间保持可见状态”，即需要设置"font-display: swap"，因此需要重写站点的css，以覆盖 NexT 原有的样式表。
将修改步骤记录如下：

修改步骤

1. 修改NexT配置

修改博客目录的themes/next/_config.yml文件，找到custom_file_path字段，修改如下：

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

2. 在线生成字体文件

通过 https://www.font-converter.net/ 将 ttf 字体转换成多种格式，将其放在 source/fonts 文件夹下，记住网页中给出的font-family信息。

3. 创建新的样式表

在source/_data/styles.styl加入如下内容：

@font-face {
  font-family: "fontawesome-webfont";
  src: url("/fonts/fontawesome-webfont.eot"); /* IE9 Compat Modes */
  src: url("/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/fontawesome-webfont.otf") format("opentype"), /* Open Type Font */
    url("/fonts/fontawesome-webfont.svg") format("svg"), /* Legacy iOS */
    url("/fonts/fontawesome-webfont.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/fonts/fontawesome-webfont.woff") format("woff"), /* Modern Browsers */
    url("/fonts/fontawesome-webfont.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: "Times New Roman", "FZS3JW", "PingFang SC", "Microsoft YaHei";
}