Hexo NexT 主题添加自定义字体
博客字体的处理从线上到站点本地
前言:所用字体
本站点所用中文字体:思源宋体
本站点所用英文字体:Garamond
曾经:使用方式
首先访问Google Fonts官网,官网搜索 Noto Serif SC
,点 +
号选择,选择好后底部会弹出一个提示框,里面有使用说明。还可以点击提示框中的 CUSTOMIZE
定制要加载的字重与语言。
这里我们选择 regular 400 , medium 500 (非必选) , bold 700
之后,点击 EMBED
,复制生成的代码,添加到博客的 <head>
标签内,并修改博客的相关 CSS 样式,指定 font-family
和 font-weight
。
最后,考虑到宋体的笔画要比黑体细,因此建议将字体的颜色加深,比如修改为 #333
,以达到较好的阅读效果。
对于中文,思源宋体已经非常美观了,但对于英文.
在已选择 Noto Serif SC
的基础上,继续搜索 EB Garamond
,点 +
号选择,然后 CUSTOMIZE
勾选四个:
- regular 400
- regular 400 Italic
- bold 700
- bold 700 Italic
同样,复制生成的代码,添加到博客的 <head>
标签内,然后需修改 font-family
:
1 | font-family: 'EB Garamond', 'Noto Serif SC', serif; |
在配置文件按如下步骤操作:
_config.yml
1 | # 文件位置:~/blog/themes/next/_config.yml |
base.styl
1 | # 文件位置:~/blog/themes/next/source/css/_variables/base.styl |
external-fonts.swig
1 | 文件位置:~/blog/themes/next/layout/_partials/head/external-fonts.swig |
将这个文件的全部内容直接替换为 Google Fonts 网站生成的 <link>
代码,然后可以将 googleapis.com
修改为 loli.net
。
custom.styl
1 | /* 文件位置:~/blog/themes/next/source/css/_custom/custom.styl */ |
过去:处理方式
在部署完上述的配置后我们可以发现:
访问站点刷新页面,查看网络请求,会发现站点默认引用了 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
再刷新页面,会发现已经请求到站点本身的字体文件了。