MENU

Web使用HarmonyOS字体的压缩方案

• July 11, 2022 • Read: 3844 • 解决方案

HarmonyOS 字体

https://developer.harmonyos.com/cn/docs/design/font-0000001157868583

通过研究用户在不同场景下对多终端设备的阅读反馈,综合考量不同设备的尺寸、使用场景等因素,同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求,我们为 HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans(即鸿蒙字体)。

image.png

HarmonyOS 字体效果

通过 BILIBILI(哔哩哔哩)主站的使用效果来看,能明显发现 HarmonyOS 字体在 Windows 低分辨率pixel-ratio < 1.5屏幕上显示更加细腻。

网页加载速度的影响

如果需要全站使用同一种字体,那么我们或许需要同时加载 Regular、Medium、Bold 等不同字重的字体文件,这里给一个参考:
HarmonyOS_Sans_SC_Regular.ttf 文件大小高达 8068KB,注意,这仅仅是 Regular。
所以,如果不对字体文件进行压缩,将其作为 Web 字体是不合理的,这将极大拉缓网页加载速度,严重影响用户体验。

字体压缩

FontTools

What is this?

fontTools is a library for manipulating fonts, written in Python. The project includes the TTX tool, that can convert TrueType and OpenType fonts to and from an XML text format, which is also called TTX. It supports TrueType, OpenType, AFM and to an extent Type 1 and some Mac-specific formats. The project has an MIT open-source licence.

Among other things this means you can use it free of charge.

User documentation and developer documentation are available at Read the Docs.

如何压缩

借助以上工具,我们可以将 unicode 分为多个片段来对字体文件进行压缩:

字符集字数Unicode 编码
拉丁字母--0000-007F,0080-00FF等
基本汉字20902 字4E00-9FA5
中文字符--3002,FF1F等

我们只需要对这两万多个基本汉字进行分段即可,至于数字、拉丁字母等,其实并不会过多影响字体文件大小。

将 unicode 合理分段后,使用 fonttools subset 对字体进行压缩,命令如下:

pyftsubset ./HarmonyOS_Sans_SC_Bold.ttf --unicodes-file=./unicodes.txt --with-zopfli --flavor=woff2

# 参数说明
# pyftsubset <PATH>        # 待压缩字体文件路径
# --unicodes-file=<PATH>   # unicode.txt 文件路径
# --with-zopfli            # 使用 Google 压缩算法
# --flavor=<TYPE>          # 输出字体格式

我们将 unicode 写入 unicode.txt 文件中,使用 --unicodes-file=<PATH>即可使用。
待所有字体压缩完成后,我们在 CSS 中使用 unicode-range属性来调用对应 unicode 区域的字体文件。

具体效果可参考本站 (Windows 且pixel-ratio < 1.5环境下)的字体显示情况。


字节星球 Henry 2022-07-11 未经许可 严禁转载!
https://www.bytecho.net/archives/2042.html

版权属于:字节星球/肥柴之家 (转载请联系作者授权)
原文链接:https://www.bytecho.net/archives/2042.html
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

Last Modified: October 19, 2023
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

11 Comments
  1. 聂 IP属地:北京     Windows 10+    Google Chrome

    你好,工具如何使用,unicode文件如何编写?

    1. Henry Henry     Windows 10+    Google Chrome

      @聂在TXT文件中一行写一个unicode,无需\u前缀,如下所示:

      7510
      7ED3

      也可以写unicode范围(半角逗号分隔):

      7510-7ED3,7ED4-8897

      工具使用方法已在文中详细说明。

  2. S̆̈ S̆̈ IP属地:江苏     macOS    Safari

    之前用了一个多月,效果不错,但是最近发现浪费服务器流量,所以还是去掉了,就用系统默认的吧

    1. Henry Henry     Windows 10+    Google Chrome

      @S̆̈确实,压缩字体同时也是为了减少流量,而且我也对加载环境进行了限制,在Windows 且 pixel-ratio < 1.5 的环境下才会加载HarmonyOS字体。

  3. UI柒 UI柒 IP属地:四川     Windows 8.1    Google Chrome

    确实很耐看,最近也准备用上

    1. Henry Henry     Windows 10+    Google Chrome

      @UI柒欢迎访问,期待你的新主题!

  4. 常瑞 常瑞 IP属地:天津     Windows 10+    Google Chrome

    字体感觉没必要换,增加加载量(虽然我的头图就已经够大了)@(阴险)

    1. Henry Henry     Windows 10+    Google Chrome

      @常瑞在其他系统确实没有必要,所以我只在windows下替换了字体,始终感觉windows的字体差点意思。

  5. 卿歌 卿歌     Windows 10+    FireFox

    \#(小眼睛)康康,万一能用到呢

    1. Henry Henry     Windows 10+    Google Chrome

      @卿歌欢迎小陌,需要换字体,本肥随时提供帮助!

    2. 卿歌 卿歌     Windows 10+    FireFox

      @Henry好的捞肥::xhl:waizui::