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

---

---

　　今天看到一博主使用了鸿蒙字体(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;}

折腾出来的经验

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

---

文章标题：给博客更换鸿蒙字体(HarmonyOS_Sans)及网页字体相关知识
分类标签：折腾，主题模板，工具代码，CSS样式，网页字体
文章链接：https://www.80srz.com/posts/454.html
许可协议： 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)