给博客更换鸿蒙字体(HarmonyOS_Sans)及网页字体相关知识

本文最后由荒野孤灯更新于 2023 年 11 月 22 日，已超过 149 天没有更新。如果文章内容或图片资源失效，请留言反馈，将会及时处理，谢谢！

　　今天看到一博主使用了鸿蒙字体(HarmonyOS_Sans)，感觉挺不错，于是给我的博客也换上了。

有事先问问度娘

　　网上找到这样一段 CSS 样式代码：

@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
    src: url('https://jsdelivr.panbaidu.cn/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
         url('https://jsdelivr.panbaidu.cn/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff') format('woff');
}
*{font-family:HarmonyOS_Sans_SC_Medium;}

动手操作

　　将上面的代码放到主题样式文件 style.css 第一行，记得把主题自带的相关代码删除。也可以将上面字体文件本地化。

　　我现在的 css 代码如下：

@font-face{font-family:'Meslo LG';font-style:normal;font-size:18px;src:local('Meslo LG S'),url(../lib/meslo-LG/fonts/5.woff2) format('woff2')}
*{font-family:Meslo LG;}

折腾出来的经验

代码内字体名称可以根据自己喜好随意更改，如：将 HarmonyOS_Sans_SC_Medium 改成 Meslo LG ；
woff2 格式比 woff 格式小太多（比如：这个鸿蒙字体，woff2 格式只有800k+，woff 字体却又5mb+），且易于移动端解压加载，为加快网页加载速度，我们可以只引入 woff2 文件；效果几乎一样；
代码 *{font-family:HarmonyOS_Sans_SC_Medium;} 要加上，不然在有的客户端不会显示字体，而是用系统自带字体；（反复试了，这代码的意思估计是强制使用字体，会导致在字体文件首次加载完之前，网页文字不显示的情况，可以酌情添加，若不加就是在系统字体加载完成之前显示系统默认字体，但有些客户端就不会显示设置的字体样式了，看个人需要吧。）昨天发现，这是个谬论，@font-face{font-display:swap} 才是正道。
可以备用很多字体，命名简单点，我就找了六种字体，命名 0~5 .woff2 ，想换字体了，在这 style.css 中改个数字就 OK 啦（进阶食用方法：主题后台设置字体），贼爽。