更换typecho字体为HarmonyOS Sans


笔记846 阅7 评

{√} HarmonyOS Sans 是华为推出的鸿蒙系统默认的字体,好康

康康

下载 HarmonyOS 字体-HarmonySanc 官方文档


这是官方开放开发文档,大家可以自行下载,不过 ttf 字体文件太大,有 8M 左右,导致网站加载资源时间较长,将 ttf 转换成 woff 文件(4.3M)左右,我已经将 ttf 和 woff 文件都上传到 jsdeliver 上了,大家最后引用一下就可以了!

实现

有两种方法可以实现都挺简单

使用插件

  1. 安装 AliceStyle 插件
    这是萌卜兔的美化的插件, 下载地址
  2. 开启插件并使用字体
    图

    输入你的字体链接,从而实现字体美化
    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
评论 ( 7 )
OωO
隐私评论
  1. 赞,按照教程成功啦@(太开心)

    3年前回复
  2. 测试

    3年前回复
  3. 永恒小站

    3年前回复
  4. TaoTao

    多谢多谢

    3年前回复
  5. 看看

    3年前回复
  6. 来踩踩@(笑眼)

    3年前回复
    1. @云

      妙啊妙啊@(太开心)

      3年前回复