banner

更换网站字体为鸿蒙字体

Scroll down

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

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 两位专业大大提供的建议进行了优化~

25 赞
评论区

51

欢迎回来!


  1. <?php echo $author ?>
    justrain.2021年12月11日
    在用了,感谢博主
    1. <?php echo $author ?>
      若志奕鑫.2021年12月12日
      @justrain ,还挺好看
  2. <?php echo $author ?>
    猫叔.2021年10月26日
    我也直接COPY了你的,把博客字体改了。
    1. <?php echo $author ?>
      若志奕鑫.2021年10月26日
      @猫叔 ,还挺好康
  3. <?php echo $author ?>
    子痕.2021年10月22日
    还是喜欢微软雅黑,可惜方正的不能商用。
    1. <?php echo $author ?>
      若志奕鑫.2021年10月22日
      @子痕 ,鸿蒙的也不错啊
      1. <?php echo $author ?>
        润汁.2021年10月26日
        @若志奕鑫 ,博主能上传其他字重的字体到cdn吗,比如Thin、Light和Bold
        1. <?php echo $author ?>
          若志奕鑫.2021年10月26日
          @润汁 ,你可以自己上传到你GitHub
  4. <?php echo $author ?>
    FONG.2021年10月19日
    好是好,就是字体文件太大了。
    1. <?php echo $author ?>
      若志奕鑫.2021年10月22日
      @FONG ,的确有点
  5. <?php echo $author ?>
    小赵同学.2021年10月07日
    不错哦,我们设计专业的学生比较喜欢用的还是斗鱼字体,哈哈
    1. <?php echo $author ?>
      2broear.2021年10月10日
      @小赵同学 ,免费商用很香
    2. <?php echo $author ?>
      若志奕鑫.2021年10月08日
      @小赵同学 ,啥玩意,没听过
  6. <?php echo $author ?>
    呆哥.2021年10月07日
    阔以阔以
    1. <?php echo $author ?>
      若志奕鑫.2021年10月07日
      @呆哥 ,@huaji(13) 必须阔以
  7. <?php echo $author ?>
    响石潭.2021年10月07日
    看着舒服,有种圆滑的黑体感觉
    1. <?php echo $author ?>
      若志奕鑫.2021年10月07日
      @响石潭 舒服就对啦
  8. <?php echo $author ?>
    悟空.2021年10月07日
    感谢分享,代码我就不客气的借鉴(抄)了
    1. <?php echo $author ?>
      若志奕鑫.2021年10月07日
      @悟空 ,@huaji(15) 借鉴
  9. <?php echo $author ?>
    叶开楗.2021年10月07日
    这个字体我还是很喜欢的 有黑体的 粗狂 有带点圆润。
    1. <?php echo $author ?>
      若志奕鑫.2021年10月07日
      @叶开楗 ,@huaji(9) 嗯呢
      1. <?php echo $author ?>
        叶开楗.2021年10月19日
        @若志奕鑫 ,我也换这个字体 哈哈 感谢代码
        1. <?php echo $author ?>
          FONG.2021年10月19日
          @叶开楗 ,哈哈哈哈,我也换这个字体,在某些场景是比苹方好很多。
  10. <?php echo $author ?>
    胡家小子.2021年10月06日
    我站用的阿里巴巴普惠体 :)(hufen)
    1. <?php echo $author ?>
      若志奕鑫.2021年10月06日
      @胡家小子 ,看上去怎么跟这个鸿蒙字体好像哈哈哈 @huaji(8)
      1. <?php echo $author ?>
        胡家小子.2021年10月06日
        @若志奕鑫 ,哈哈,可能上辈子是兄弟 →_→
        1. <?php echo $author ?>
          若志奕鑫.2021年10月06日
          @胡家小子 ,@huaji(65) 懂的都懂

填写评论信息* 请勿填写博主信息~