更换网站字体为鸿蒙字体

最近刷博客的时候,
发现了一个很有感觉的字体: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 ( 42 评论)

wave
  1. 段先森

    13天前

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

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

      13天前

      @段先森 ,差不多哈哈哈

      Windows 10 · Google Chrome
  2. 豆豆

    13天前

    由汉仪字库设计,确实非常棒,非常喜欢这种舒服的感觉 ~

    Windows 10 · QQ Browser
    1. 若志奕鑫 博主

      13天前

      @豆豆 ,你博客字体也很舒服啊 ,圆滑

      Windows 10 · Google Chrome
      1. 豆豆

        12天前

        @若志奕鑫 ,诶 居然没收到邮件

        iPhone · Safari
        1. 若志奕鑫 博主

          11天前

          @豆豆 ,被窝关了哈哈哈

          Windows 10 · Google Chrome
  3. 林羽凡

    13天前

    感觉圆润了许多,不过用外部字体,总感觉会卡。

    Windows 10 · Google Chrome
    1. FONG

      13天前

      @林羽凡 ,估计是字体短暂渲染为空白就是让你感觉卡,当然字体 5MB 大小确实太大了。看了上面代码主要是 RZ.SB 这位仁兄没有对 @font-face CSS Rule 做声明优化,font-display : auto 将由浏览器自己决定字体加载,通常浏览器都是以 block 方式进行处理,字体加载期间会显示空白,直到到达浏览器阈值时间,还没加载完成字体将使用后备字体(系统字体)进行渲染,字体加载完毕后将触发字体渲染替换。

      Windows 10 · FireFox
      1. 林羽凡

        12天前

        @FONG ,果然,你是专业的,哈哈哈哈

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

        13天前

        @FONG ,font-display: fallback;
        加了这个属性应该好一点了是吧

        Windows 10 · Google Chrome
        1. FONG

          13天前

          @若志奕鑫 ,swap || fallback 都行,一般图标字体都使用 swap。

          Android · FireFox
          1. 若志奕鑫 博主

            13天前

            @FONG ,收到!

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

        13天前

        @FONG ,设计,你是专业的哈哈哈

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

      13天前

      @林羽凡 ,你那边感觉会很卡吗,我这边没啥感觉

      Windows 10 · Google Chrome
      1. 林羽凡

        12天前

        @若志奕鑫 ,卡的,我用自字义字体,总会感觉卡,可能是我没用对方,哈哈哈哈

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

          12天前

          @林羽凡 上面两个专业大大给出了建议,参考参考

          Windows 10 · Google Chrome
  4. 马内

    13天前

    鸿蒙字体,感觉和微软雅黑,差不多

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

      13天前

      @马内 ,但是鸿蒙字体给我的感觉就很舒服~ 区别应该是有的,削弱了黑体的机械感,字形易认,辨识度更高了.

      Windows 10 · Google Chrome
悄悄话

搜索