[教程] 更换WordPress网站字体为鸿蒙字体(HarmonyOS Sans)

最近几天在折腾这个网站,除了重新制作 homepage 外,还顺便把网站默认字体换成了 HarmonyOS Sans 字体。

网站字体在很大程度上影响着网站的使用体验。很多网站使用的是系统默认字体,看久了会审美疲劳。一款设计优雅的字体往往具有更好的辨识性,更赏心悦目,能给读者一种眼前一亮的感觉。

HarmonyOS Sans字体是华为 HarmonyOS 系统全新设计的默认字体,可免费商用。

HarmonyOS 开发者者社区

通过研究用户在不同场景下对多终端设备的阅读反馈,综合考量不同设备的尺寸、使用场景等因素,同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求,我们为 HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans。

HarmonyOS Sans字体的两个我比较喜欢的特性

  1. 字体笔画经过重新设计,短笔画比较干练硬朗,线条简约;长笔画借鉴了书法笔势,富有弹性和曲线变化;
  2. 字体灰度经过优化,在不同场景下具有更好的辨识性和阅读体验。

直接上图:

全新字体笔画设计
图片来源:HarmonyOS Developer site
字体灰度优化
图片来源:HarmonyOS Developer site

实现步骤

想了解更全面的字体引入教程,请参考风记星辰提供的教程:

免费引入商用黑体字体系列整理及字体引入亲妈式教程

以下实现代码参考了晚柔小站写的教程,可先将其复制到剪切板:

//HarmonyOS Sans字体加载
@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
    src: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-52cc7ff7-fc64-49e7-b0a0-1dc090ee49a2/58d1ca58-60f0-454e-9f63-f802732a7078.woff2') format('woff2')
}
*{font-family:HarmonyOS_Sans_SC_Medium;}

然后前往 WordPress 网站后台,依次点击左侧边栏的外观 > 额外CSS,然后将剪切板内的代码复制进去,单击发布按钮:

清除缓存后,可以看到网站页面已经应用了 HarmonyOS Sans 字体:


题图来源:People illustrations by Storyset

本文作者
本文作者

Justin(小贾,贾老师), Microsoft 365 认证:新式桌面管理员助理,乐天派,打工人。

本篇文章采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。