用font-face设置站点的字体

看到有的站点设置了特殊的字体，感觉现实效果很棒，依样画葫芦尝试定义了一下自己博客的字体。@font-face是css3中允许使用自定义字体的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

这里采用了华为的鸿蒙字体，相比微软雅黑，鸿蒙字体显得更为方正。在手机端有更好的现实效果，在电脑端，个人感觉在不同的浏览器上显示效果略有差异。在谷歌的chrome中，这套字体表现的更为圆滑，相比之下，在火狐浏览器中，总感觉字体有点儿毛刺。当然，也可能是由于博主的祖传显示器显示效果过于差劲的关系。

字体定义

@font-face{
    font-family:HarmonyOS_Sans_SC_Medium;
    font-style:normal;font-display:swap;
    src:url('font/HarmonyOS_Sans_SC_Medium.subset.woff2') format('woff2');
}

字体引用

*{font-family:"HarmonyOS_Sans_SC_Medium";}

因为服务器配置一般，虽然已经采用了woff2的字体格式，将字体体积控制到了800多k，访问时还是需要占用6-8秒的加载时间，最后还是取消了字体的自定义，使用了系统默认的字体。