Original link: https://www.bytecho.net/archives/2042.html
HarmonyOS font
https://developer.harmonyos.com/cn/docs/design/font-0000001157868583
By studying the user’s reading feedback on multi-terminal devices in different scenarios, we comprehensively consider factors such as the size and usage scenarios of different devices, and also consider the differences in font size and font weight caused by differences in viewing distance and viewing angle when users use devices. Different demands, we designed a new system default font for HarmonyOS – HarmonyOS Sans (that is, Hongmeng font).
HarmonyOS font effects
Judging from the use of the BILIBILI main site, it is obvious that the HarmonyOS fonts are displayed more delicately on Windows.
The impact of web page loading speed
If you need to use the same font for the entire site, then we may need to load Regular, Medium, Bold and other font files at the same time, here is a reference:
The file size of HarmonyOS_Sans_SC_Regular.ttf is up to 8068KB. Note that this is only Regular.
Therefore, if the font file is not compressed, it is unreasonable to use it as a web font, which will greatly slow down the loading speed of the web page and seriously affect the user experience.
font compression
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 .
how to compress
With the above tools, we can split unicode into pieces:
| character set | word count | Unicode encoding |
|---|---|---|
| Latin alphabet | — | 0000-007F, 0080-00FF, etc. |
| Basic Kanji | 20902 words | 4E00-9FA5 |
| Chinese characters | — | 3002, FF1F, etc. |
We only need to segment more than 20,000 basic Chinese characters. As for numbers, Latin letters, etc., it does not affect the font file size too much.
After the unicode is properly segmented, use fonttools subset to compress the font, the command is as follows:
pyftsubset ./HarmonyOS_Sans_SC_Bold.ttf --unicodes-file=./unicodes_10.txt --with-zopfli --flavor=woff2 # 参数# 待压缩字体文件路径# --unicodes-file=unicode 文件路径# --with-zopfli 使用Google 压缩算法# --flavor=输入文件类型
We write unicode into the unicode.txt file and use --unicodes-file=<PATH> to use it.
After all the fonts are compressed, we use the unicode-range property in CSS to call the font file for the unicode region.
For specific effects, please refer to the font display on this site (under Windows).
Byte Planet Henry 2022-07-11 Reprinting without permission is strictly prohibited!
https://www.bytecho.net/archives/2042.html
This article is reprinted from: https://www.bytecho.net/archives/2042.html
This site is for inclusion only, and the copyright belongs to the original author.