>前言

鸿蒙字体最初是在@若志奕鑫的博客看见的,第一眼感觉很舒服,简约无装饰,没有多余的笔画,然后博客就替换使用了,后面看顺眼了鸿蒙字体,发现 win10 自带的字体非常难看,大部分网页默认也是电脑的字体,所以想办法给网页和电脑都替换成鸿蒙字体了,于是便有了这篇文章~

HarmonyOS Sans

>博客

你可以选择直接白嫖b站的链接,或者自己保存所有小字体文件来引入,前者便捷而且速度很快(直接白嫖 b站 的 cdn),但是如果 b站 的资源删除了,那么你也就寄了;后者好处就是很稳定,但速度全部取决于你自己的 cdn。

有 regular 和 medium 两种样式,后者粗一点,自己看着选择一个

  1. 给网站引入字体的 css 文件,bf 主题的同学直接在 inject 处引入即可

如果引用我的 css 文件的同学我强烈建议你去我的仓库把harmonyregularmedium三个文件夹下载保存到自己的仓库或者云存储中,然后批量替换 css 文件中的各个小字体文件地址即可,至少也得下载到电脑做个备份 因为这种白嫖的 cdn 比较不稳定,你懂的,jsd,zhimg 都先后寄了,eleme 感觉也是早晚的事了

<!-- 白嫖b站 -->
<link rel="preconnect" href="https://s1.hdslb.com/" />
<link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" media="all" onload="this.media='all'" />
<link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css" media="all" onload="this.media='all'" />

<!-- 自己引入 -->
<link rel="preconnect" href="https://npm.elemecdn.com/" />
<link rel="stylesheet" href="https://npm.elemecdn.com/gahotx-cdn@1.0.14/fonts/harmony/regular.min.css" media="all" onload="this.media='all'" />
<link rel="stylesheet" href="https://npm.elemecdn.com/gahotx-cdn@1.0.14/fonts/harmony/medium.min.css" media="all" onload="this.media='all'" />
  1. 在主题的 config 文件修改如下

下面的code-font-family不建议直接变成鸿蒙字体, 因为鸿蒙字体的英文是变宽的, 用了之后代码缩进会出现问题, 不过可以像下面一样先给英文定义一个等宽字体, 然后再设置中文字体为鸿蒙字体

font-family: "HarmonyOS_Regular" # medium 用户自己替换成"HarmonyOS_Medium,下面都同理"

# 喜欢中英文统一字体的同学可以忽略下面
code-font-family: Consolas,"HarmonyOS_Regular",system-ui,-apple-system,BlinkMacSystemFont,serif
  1. 在自己引入的魔改 css 文件添加如下代码

非 butterfly 主题的同学第二步不适用,添加下面这段 css 即可,butterfly 主题的可以忽略这一步

body {
  font-family: "HarmonyOS_Regular" !important;
}

>其他网页

一个油猴脚本,无需安装 MacType,优化浏览器字体显示,其中可以自己选择鸿蒙字体,我觉得效果还是挺好的,字体的描边、阴影都跟好看了,而且也可以设置对特殊的元素过滤掉,比如侧边栏时钟的字体等

字体渲染

>Windows 电脑

可能很多人已经使用了 MacType 等软件改了 windows 自带的字体了, 没有需求的同学忽略即可, 因为这个软件比较无脑便捷, 所以也一起安利了, 电脑变成鸿蒙字体之后变化非常明显, 字体的细节, 阴影等, 鸿蒙字体 yyds~

  1. 先把鸿蒙官网提供的字体下载并双击安装一个自己喜欢的粗细的 ttf

注意是选择 HarmonyOS_Sans_SC 文件夹中的,其他的是另外的语言

  1. 下载 noMeiryoUI 软件

  1. 选择自己安装好的鸿蒙字体, 然后设置字体大小, 再点统一设定应用即可

>总结

其实一开始我是按照传统的引入字体方式给博客引入的,后面发现直接引入整个字体文件,即使是将鸿蒙官方提供的 .ttf 转换成更小的 .woffwoff2,网站加载字体还是很慢,没有之前引入谷歌字体那么丝滑,谷歌是将几m的字体文件分割成很多个几十kb的字体文件加载,所以十分丝滑,但是我不知道怎么分呀,后面看到 b站 新主页竟然也用了鸿蒙字体,然后F12控制台看看他的引入方式,不愧是前端技术前沿的大厂,果然跟谷歌一样是将字体分成多个小文件加载的,(我一个个链接复制粘贴下载了好久,二三十个小文件),不过觉得麻烦的同学也可以参考@若志奕鑫的引入字体方式,但是我个人是觉得分成多个小文件后字体加载快了很多,萝卜青菜各有所爱~