{√} HarmonyOS Sans 是华为推出的鸿蒙系统默认的字体,好康
下载 HarmonyOS 字体-HarmonySanc 官方文档
这是官方开放开发文档,大家可以自行下载,不过 ttf 字体文件太大,有 8M 左右,导致网站加载资源时间较长,将 ttf 转换成 woff 文件(4.3M)左右,我已经将 ttf 和 woff 文件都上传到 jsdeliver 上了,大家最后引用一下就可以了!
实现
有两种方法可以实现都挺简单
使用插件
- 安装 AliceStyle 插件
这是萌卜兔的美化的插件, 下载地址 - 开启插件并使用字体
输入你的字体链接,从而实现字体美化
jsdeliver 云端 ttf 字体:
https://cdn.jsdelivr.net/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.ttf
jsdeliver 云端 woff 字体:https://cdn.jsdelivr.net/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff
https://cdn.jsdelivr.net/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff2
使用CSS
在后台CSS样式添加以下代码:
<style>
@font-face {
font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff') format('woff');
}
*{font-family:HarmonyOS_Sans_SC_Medium;}
</style>
本站用的就是HarmonyOS Sans
字体
效果显而易见~
最后更新 2023-11-07
赞,按照教程成功啦@(太开心)
测试
永恒小站
多谢多谢
看看
来踩踩@(笑眼)
妙啊妙啊@(太开心)