网站使用HarmonyOSHans字体

一直觉得网站的字体在Windows和Mac设备上显示的不一样，想着统一一下，结果一直没找到合适的字体。

昨天发现小米官方的MiSans可以免费商用，Mac系统下看起来还不错，并且官方还有免费的CDN给用，很是心动，可惜换上之后，不知道是设置原因还是什么，发现在Windows系统下的显示还是差点儿意思。

不过，既然小米手机的字体能免费商用，我大华为没道理不可以，于是上网搜了一下，果然有鸿蒙专用字体，而且也是免费商用的。

字体效果可以参见本站。

官网介绍：https://developer.huawei.com/consumer/cn/doc/design-guides/font-0000001828772001

下载下来之后发现字体包很大，8M多，这样的话，网站使用会大大延缓加载速度。然后就想着把字体给切片之后使用。

其实字体切片，网上有很多工具可以实现，不过家里的电脑没有对应的环境，万幸在万能的GitHub上找到别人切好片的字体文件，直接fork。感谢这位大佬，感谢万能的GitHub。

下载字体

HarmonyOSHans字体切片下载：https://github.com/lifengdi/HarmonyOSHans

使用方法

上传字体切片及CSS文件到你的网站或者其他CDN服务

创建HarmonyOSHans文件夹，将css文件以及font文件夹上传到HarmonyOSHans文件夹。

引入字体

<link rel="stylesheet" href="https://yourdomain.com/HarmonyOSHans/common.css">

使用字体

根据需要在 CSS 中添加 HarmonyOSHans-Regular 字体，本例样式中已自适应字宽。

<style>
  body {
    font-family: 'HarmonyOSHans-Regular', sans-serif;
  }
</style>

您也可以直接使用以下CSS代码：

/* 字体相关css */
@import url("https://yourdomain.com/HarmonyOSHans/common.css");
@font-face {
  font-family: "HarmonyOSHans-Regular", sans-serif;
  font-weight: normal;
  font-style: normal;
}
*:not([class*="icon"]):not(i) {
  font-family: "HarmonyOSHans-Regular" !important;
}

注意：需要将https://yourdomain.com/HarmonyOSHans/common.css替换成为您自己的链接

除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.lifengdi.com/archives/course/4466