发布于 

Hexo Stellar 主题和 Next 主题使用 HarmonyOS 字体

前序文章:
Hexo Stellar 主题和 Next 主题使用 KaTex 公式与 Markdown 复杂表格

HarmonyOS Sans 字体

HarmonyOS 字体是华为发布的可免费商用的字体。其设计上聚焦于功能性、普适性,是一款多语言的无级可变字体,支持简体中文、繁体中文、拉丁、西里尔、希腊、阿拉伯等 5 大书写系统,105 种语言全球化覆盖。

下载 HarmonyOS Sans

我尝试了一下,在展示效果上,HarmonyOS 字体看上去确实要舒服很多,索性把它设置为了博客的基础字体。实际效果可以参考本博客。

Stellar 主题使用 HarmonyOS 字体

Stellar 主题的字体设置在主题目录下的 source/css/_custom.styl 文件中,下面详细讲一下操作步骤。

如果要查看详细步骤可以参考 Hexo 博客 NexT 主题设置之使用 HarmonyOS 字体

引入字体资源

站点配置文件_config.yml 中,添加如下配置引入字体。

_config.yml
1
2
3
4
5
inject:
head:
- `<link rel="preconnect" href="https://s1.hdslb.com/" />`
- `<link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" media="all" onload="this.media='all'" />`
- `<link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css" media="all" onload="this.media='all'" />`

上面的代码会引入 regularmedium 两种字重,其显示效果如下图,我使用的是 regular

HarmonyOS 字体不同字重显示效果对比
HarmonyOS 字体不同字重显示效果对比

修改主题的字体设置

主题目录下 source/css/_custom.styl 文件,找到字体变量的设置代码:

source/css/_custom.styl
1
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif

将其修改为:

source/css/_custom.styl
1
$ff-body = HarmonyOS_Regular

如果喜欢粗一点的字体,可以修改为

source/css/_custom.styl
1
$ff-body = HarmonyOS_Medium

使设置生效

完成上述修改后,执行

1
hexo cl & hexo g & hexo s

再访问 localhost:4000 可以查看效果

Next 主题使用 HarmonyOS 字体

请参考 Hexo 博客 NexT 主题设置之使用 HarmonyOS 字体,这篇文章介绍了 Next 主题无侵入的字体修改和样式自定义方法

如何选择字体

如何选择字体格式
  • 为了不影响访问效率,不建议使用 src: url('../fonts/yaheiconsolashybrid.ttf') 引入 ttf、otf 等字体格式,而要使用 woff2 格式。
  • 为了进一步节省带宽,提升访问速度,还可以使用 unicode-rangeCSS 描述符对 @font-face 范围内的字体进行分割,如果页面没有使用此 unicode 编码范围内的字符,则不会下载字体,可以做到按需加载。
  • 本文上面提供的 B 站已经处理好的 woff2 格式的字体,访问速度也很快,我们这里直接白嫖了一下。感谢 B 站,B 站🐮🍺!