更换网站字体为鸿蒙字体

最近刷博客的时候,
发现了一个很有感觉的字体:HarmonyOS Sans

HarmonyOS Sans是华为推出的鸿蒙系统默认的字体,可以免费商用.
这个字体对中文进行的优化,使得更加易读,系统字体区别于传统平面印刷字体,在智能终端的应用场景之中看起来非常干净利落,让用户阅读文字的时候更加方便.
在西文字形设计方面,选用纯粹而经典的几何造型,直观醒目.
还有大开口造型处理,字形易认,辨识度更高。和其他字体相比起来,鸿蒙字体削弱了黑体的机械感,可以让用户明显感知到了字体笔画的优化.
更多了解:官方文档

起初看到这个字体的时候是在@THYUU老哥站点上看到的,当时看到他这个主题的时候,就感觉莫名的不一样,可能跟字体有很大的关系吧.
当时也没太注意,直到昨天在某群看到一个站点,点进去一看,感觉都不一样的,字体很是突出,真的让我明显感知到了字体笔画的优化,和其他字体相比起来,的确是削弱了黑体的机械感,字形易认,辨识度更高.
于是就决定给我主题也换上这个字体看看,通过了解,需要先到官方文档下载字体.
为了方便引用
我干脆直接上传到了我的GitHub
并通过jsdelivr进行CDN加速:
https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff
https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2
最后打开样式文件添加以下代码:

@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff');
}
*{font-family:HarmonyOS_Sans_SC_Medium;}

就这样,HarmonyOS Sans就更换好了!
效果显而易见~
最后感谢@THYUU @FONG 两位专业大大提供的建议进行了优化~

Comments ( 39 评论)

wave
  1. 小赵同学

    8天前

    不错哦,我们设计专业的学生比较喜欢用的还是斗鱼字体,哈哈

    Android · Google Chrome
    1. 2broear

      6天前

      @小赵同学 ,免费商用很香

      Windows 10 · Google Chrome
    2. 若志奕鑫 博主

      8天前

      @小赵同学 ,啥玩意,没听过

      Android · Google Chrome
  2. 呆哥

    8天前

    阔以阔以

    iPhone · QQ Browser
    1. 若志奕鑫 博主

      8天前

      @呆哥 必须阔以

      Windows 10 · Google Chrome
  3. 响石潭

    8天前

    看着舒服,有种圆滑的黑体感觉

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      8天前

      @响石潭 舒服就对啦

      Windows 10 · Google Chrome
  4. 悟空

    9天前

    感谢分享,代码我就不客气的借鉴(抄)了

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      9天前

      @悟空 借鉴

      Windows 10 · Google Chrome
  5. 叶开楗

    9天前

    这个字体我还是很喜欢的 有黑体的 粗狂 有带点圆润。

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      9天前

      @叶开楗 嗯呢

      Windows 10 · Google Chrome
  6. 胡家小子

    9天前

    我站用的阿里巴巴普惠体

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      9天前

      @胡家小子 ,看上去怎么跟这个鸿蒙字体好像哈哈哈

      Windows 10 · Google Chrome
      1. 胡家小子

        9天前

        @若志奕鑫 ,哈哈,可能上辈子是兄弟 →_→

        Windows 10 · Google Chrome
        1. 若志奕鑫 博主

          9天前

          @胡家小子 懂的都懂

          Windows 10 · Google Chrome
  7. 森木志

    9天前

    感觉这个字体跟默认粗了一点,好看

    Android · Google Chrome
    1. 若志奕鑫 博主

      9天前

      @森木志 好康就对了

      Windows 10 · Google Chrome
  8. THYUU

    9天前

    其实显示问题并不能怪字体的问题,而是在 windows 上看着效果不佳而已。那是因为微软在开发 windows 系统时,对字体渲染优化考虑不周,具体原因是处理抗锯齿时,越小的字体会出现边缘模糊。而这点在 mac 上看着就不会出现问题。近年来,微软也在通过默认字体“微软雅黑”以及“ClearType”程序来优化。因此,当你把字体调大(超过30px)或者将系统DPI设置为125%时,就会发现字体十分清晰。

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      9天前

      @THYUU 学到了~

      Windows 10 · Google Chrome
  9. THYUU

    10天前

    还有加载慢,是因为你使用的是ttf字体格式,可以使用woff2和woff格式会将文件大小压缩至70%呢,另使用后者是因为考虑兼容性,而使用ttf仅仅是为了兼容ie10以下,我认为不用尚可。具体表现css代码为:
    @font-face {font-family: 字体名; //自定义字体名称 font-display: swap; // 在未加载字体时,使用本地字体 src: url('字体链接.woff2') format('woff2'), url('字体链接.woff') format('woff');}

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      9天前

      @THYUU 感谢大大,这方面的确不是很懂.

      Windows 10 · Google Chrome
  10. 段先森

    10天前

    哈哈,我眼盲了,比如说楷体和行书这样我才能区分开来,

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      10天前

      @段先森 ,差不多哈哈哈

      Windows 10 · Google Chrome
悄悄话

搜索