Skip to main content

字体分包

1、在下面的网站中将需要分割的字体上传并执行分割,将分割结果下载

https://chinese-font.netlify.app/online-split/

image-20240327173043563

2、下载的文件中找到result.css,检查font-family是否正确,如果与系统定义个字体不一致则修改成一致,要么修改系统定义的使用的字体,要么修改result.css里面定义字体,如下是将HarmonyOS Sans SC替换成HarmonyOS_Sans_SC_Regular

image-20240327173306856

3、在style.scss或者其他地方中引入result.css

其他项目可参考如下,通过检查发现,现在产品使用的鸿蒙字体只有三个HarmonyOS_Sans_SC_RegularHarmonyOS_Sans_SC_MediumHarmonyOS_Sans_SC_Bold,其中HarmonyOS_Sans_SC_Regular是系统主字体,另外两个字体使用的地方很少,因此为了几个字体的样式引入几十兆的文件是不划算的,下面的截图中都将大部分字体引入给注释了,只引入了分包之后的鸿蒙字体

@import '~resources/theme/default/fonts/HarmonyOS_Sans_SC_Regular/result.css';

image-20240327173744907

4、结果查看

image-20240327174229500