CSS 使用字体新姿势: unicode-range
1 views
1. 前言
最近在写开源博客项目 [LXGW Wenkai](https://fontsource.org/?query=lxgw) 。
2. 换字体的初衷
其实在考虑是否要换字体的时候纠结了很久，如果是使用一些常见的字体，比如 Arial 、 Times New Roman 、 Courier New 等，那么就不需要换字体，因为这些字体已经是很好的字体了，这样的好处是不需要加载额外的字体文件，这样可以减少加载时间，提高性能 。
但是如果是一些特殊的字体，比如 LXGW Wenkai 、 LXGW Wenkai SC 、 LXGW Wenkai TC 等，那么就需要换字体了。如果是单纯的英文字体的话文件体积还是很小的，一但涉及展示中文的话，这个字体体积一下就上来了，5M ~ 10M算是小的，普遍都是10M以上。这样就会带来字体第一次加载的时候会比较慢，FCP也会相应的增加，还有就是肉体可见的当字体加载前显示的是一种字体，加载完替换后变成了另一种字体，肉眼可见的字体切换，导致整体来说不是很好。
但是为了个性化的体验，还是决定从尝试下换字体的效果，然后顺便看下可以通过什么方案来优化下这个字体文件太大带来的影响。
3. 字体加载解决方案
3.1 前端不同文件类型的字体文件，有什么区别？
前端常用的字体文件格式主要有以下几种：
| 文件类型 | 全称 | 特点 | 兼容性 |
|---|---|---|---|
| .ttf | TrueType Font | 早期标准格式，文件体积较大，支持 hinting（字体微调技术），在 Windows 和 Mac 系统中都有较好的兼容性。 | 广泛兼容 |
| .otf | OpenType Font | 基于 TrueType 发展而来，支持更多特性，例如更多的字符集和高级排版功能，文件体积相对较小。 | 广泛兼容，优于 TTF |
| .woff | Web Open Font Format | 专为 Web 设计，经过压缩，文件体积更小，加载速度更快。 | 现代浏览器广泛支持 |
| .woff2 | Web Open Font Format 2.0 | woff 的升级版，采用更先进的压缩算法，文件体积比 woff 更小，加载速度更快。 | 大部分现代浏览器支持（IE 不支持） |
| .eot | Embedded OpenType | 微软开发的格式，主要用于 IE 浏览器，其他浏览器基本不支持。 | 仅 IE 支持，已过时 |
| .svg | Scalable Vector Graphics | 矢量图形格式，可以用来显示字体，可以无限缩放而不失真，但文件体积较大，渲染速度较慢。 | 大部分现代浏览器支持，但性能相对较差 |
选择字体文件类型时，需要考虑以下因素：
- 兼容性： 确保选择的字体格式能够在目标浏览器上正常显示。
- 文件大小： 文件越小，加载速度越快。
- 字体特性： 某些字体格式支持更多特性，例如高级排版功能。
建议：
- 优先使用 woff2 格式，它拥有最佳的压缩率和广泛的浏览器支持。
- 如果需要兼容旧版浏览器，可以使用 woff 格式。
- 避免使用 eot 格式，它已经过时且兼容性差。
- 可以根据需要使用 ttf 或 otf 格式，但要注意文件大小。
3.2 字体文件的压缩
-
字体文件的压缩是一个重要的步骤，它可以减少文件大小，提高加载速度。字体文件的压缩可以使用各种工具和软件将 .ttf 等格式转化为 .woff2 等压缩体积较小的文件。
-
font-spider，借助font-spider 来实现根据你网页需要显示的文字来压缩字体文件，只包含你网站需要用到的文字，这样就使得字体文件大小得到了极大的提升，一个8M大小的字体文件压缩下来可能就只有几KB。这种比较适合静态文件，通过一次编译就能分析出所有使用的字体，如果包含一些动态文件，在编译时无法分析出来的话，就会出现显示异常的情况。
3.3 unicode-range
Google Fonts 里找到了新的解决方案。本意是我自己使用的那个字体太大了，看能不能到一个稍微小一点的包含汉字的字体，当时找了一个合适的字体以后，Google Fonts提供在线使用，在使用了提供的link代码以后，放在网页中发现网页加载很快，字体相关文件只用了几百毫秒，感觉还是比较震撼，这个字体下载下来以后发现有3M左右的大小，正常加载应该也需要6-10秒左右，这种毫秒级的加载感觉还是很震撼的，看了下提供的link里的css代码如下格式:
我们看到，通过将 unicode-range 的值设置为不同的区间分段，这样在网页中只需要加载符合对应区间的字体，而不需要加载整个字体文件。这样就可以减少网页的加载时间，提高用户体验。
虽然看这像是请求了很多，但是在 http2 协议中，通过多路复用的方式，可以优化请求的数量，从而提高网页加载的速度。所以整体来说还是要比直接请求一个完整的字体文件要快的多。