transfonter可以快速的将.ttf字体转为 woff2和woff格式，且生成的压缩包中提供了html demo和css样式。

@font-face formats with CSS and HTML sample files

官网

https://transfonter.org

免费商用ttf字体可以在100font免费下载，不死鸟已经转换好了4款免费中文商用字体，如需应用到网页中，建议引用知乎cdn，国内会加载会快不少。

https://unpkg.zhimg.com/niaosu/font/

cdn引用

华为鸿蒙

https://unpkg.zhimg.com/niaosu/font/huawei/HarmonyOS.woff2
https://unpkg.zhimg.com/niaosu/font/huawei/HarmonyOS.woff

将华为鸿蒙字体应用到网页中的演示：https://dalao.ru

小米MiSans

https://unpkg.zhimg.com/niaosu@3.3.2/font/xiaomi/MiSans.woff2
https://unpkg.zhimg.com/niaosu@3.3.2/font/xiaomi/MiSans.woff

OPPOSans

https://unpkg.zhimg.com/niaosu/font/oppo/oppo.woff2
https://unpkg.zhimg.com/niaosu/font/oppo/oppo.woff

优设好身体

https://unpkg.zhimg.com/niaosu/font/haoshenti/haoshenti.woff2
https://unpkg.zhimg.com/niaosu/font/haoshenti/haoshenti.woff

如何在网页中使用Webfont可以看下方示范：

https://npm.elemecdn.com/niaosu@3.2.4/font/haoshenti/index.html