MENU

更换网站字体为鸿蒙字体HarmonyOS Sans

2022 年 04 月 26 日 • 阅读: 497 • 笔记

一直都觉得我博客的字体不好看,太过单调,且看久了感觉眼睛好疲劳,也不方便阅读,时常看漏一些字,所以干脆为博客换个字体吧,方法所有网站通用。

HarmonyOS Sans字体

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

使用方法

首先去官方文档下载字体,为了方便引用,将字体文件放在云储存或者服务器里,但是ttf字体文件太大,大约8M左右,导致网站加载资源时间较长,可以将ttf压缩转换成woff文件格式后再引用字体。若还是担心字体文件过大而加载慢,可以参考下我之前写的两篇博文来改善页面加载速度:通过 js 脚本实现网站预加载提升页面加载速度Typecho 博客做动静分离达到优化速度

引用
在CSS样式文件中添加以下代码:

<style>
@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
    src: url('这里填写字体文件地址') format('woff2'),
         url('这里填写字体文件地址') format('woff');
}
*{font-family:HarmonyOS_Sans_SC_Medium;}
</style>

最后看一下更换前后对比效果吧。
更换前

4

更换后
5


还是觉得访问有些许慢,可能好看与加载速度之间一定要做一个取舍吧

本文到此结束
  • 文章标题:更换网站字体为鸿蒙字体HarmonyOS Sans
  • 文章链接:https://hq233.cn/archives/473.html
  • 作品采用:CC BY-NC-SA 4.0 许可协议授权
  • 版权所有:本文版权归 隔壁小胡的博客所有
    转载请先获得本人同意!
    (如有侵权,请 点此联系我删除 )
  • 最后编辑于: 2022 年 05 月 19 日
    返回文章列表 文章二维码
    本页链接的二维码
    打赏二维码