Abo

记录:解决了Google Fonts加载问题

Hexo NexT 主题添加自定义字体

wallhaven-kw1mr1

博客字体的处理从线上到站点本地

前言:所用字体

本站点所用中文字体:思源宋体

本站点所用英文字体:Garamond

曾经:使用方式

首先访问Google Fonts官网,官网搜索 Noto Serif SC,点 + 号选择,选择好后底部会弹出一个提示框,里面有使用说明。还可以点击提示框中的 CUSTOMIZE 定制要加载的字重与语言。

这里我们选择 regular 400 , medium 500 (非必选) , bold 700

之后,点击 EMBED,复制生成的代码,添加到博客的 <head> 标签内,并修改博客的相关 CSS 样式,指定 font-familyfont-weight

最后,考虑到宋体的笔画要比黑体细,因此建议将字体的颜色加深,比如修改为 #333,以达到较好的阅读效果。

对于中文,思源宋体已经非常美观了,但对于英文.

在已选择 Noto Serif SC 的基础上,继续搜索 EB Garamond,点 + 号选择,然后 CUSTOMIZE 勾选四个:

  1. regular 400
  2. regular 400 Italic
  3. bold 700
  4. bold 700 Italic

同样,复制生成的代码,添加到博客的 <head> 标签内,然后需修改 font-family

1
font-family: 'EB Garamond', 'Noto Serif SC', serif;

在配置文件按如下步骤操作:

  1. _config.yml
1
2
3
4
5
6
7
8
9
10
# 文件位置:~/blog/themes/next/_config.yml

font:
- enable: false
+ enable: true

# Global font settings used for all elements in <body>.
global:
external: true
+ family: EB Garamond
  1. base.styl
1
2
3
4
5
# 文件位置:~/blog/themes/next/source/css/_variables/base.styl

// Font families.
-$font-family-chinese = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese = "Noto Serif SC"
  1. external-fonts.swig
1
文件位置:~/blog/themes/next/layout/_partials/head/external-fonts.swig

将这个文件的全部内容直接替换为 Google Fonts 网站生成的 <link> 代码,然后可以将 googleapis.com 修改为 loli.net

  1. custom.styl
1
2
3
4
5
/* 文件位置:~/blog/themes/next/source/css/_custom/custom.styl */

.post-body {
color: #333;
}

过去:处理方式

在部署完上述的配置后我们可以发现:

访问站点刷新页面,查看网络请求,会发现站点默认引用了 fonts.googleapis.com 下的一个字体样式文件,也就是我们默认会通过Google Fonts官网进行资源的下载,而这样的访问速度是不稳定的,连接并不会每次都迅速稳定,有时甚至加载不出来。

过去的处理方式的话,是利用_config.yml里面font部分的host字段,通过加上谷歌字体的镜像网站来加快访问速度,但是镜像网站其实也面临着一个不稳定的问题,前阵子就是遇到了这个问题,所以才有了下面的解决方案

现在:解决方式

通过将字体下载到站点中,再在站点中使用绝对路径的方式引用字体

文件内容是这样的:https://images.linjiahong.top/font-face

复制该文件内容,添加到 themes/next/source/css/_custom/custom.styl 文件里,其实这里就会发现,这个样式文件通过 URL 引用了真正的外部字体文件。

说明:上述为本站点原先引用的 font配置文件,即从Google Fonts所导出的配置,准确来说就是默认在线会去访问的文件

然后再把这个样式描述文件中的字体一一下载到本地,并拷贝到 source\fonts 目录下,fonts 目录如果不存在则新建。这样站点本地就有这些字体了。

考虑到文件过多,这里我采取的方式是IDM批量获取链接

再修改上述拷贝的字体描述文件,将外部 URL 替换成本地绝对路径,即:https://gstatic.loli.net/s/ebgaramond/v14替换成/fonts

最后修改主题配置文件的 font 部分。因为字体站点本身已经有了,所以不使用 Google Fonts 的在线字体,enable 设置为 false

再刷新页面,会发现已经请求到站点本身的字体文件了。