25|字体:解决自定义字体加载问题
唐俊开
你好,我是三桥。
上一节课,我们探讨了优化首次内容绘制(FCP)的 4 种方法,还剩下三种方法没讲,分别是缩短关键请求资源深度、减少请求数量和传输大小以及确保文本在网页字体加载期间保持可见状态。
前面两个方法相对简单,我们略去不提,这节课我们专注解决字体的问题。
网页字体问题
自从现代浏览器和移动浏览器成为主流以来,Web 页面上的字体问题成为前端同学们必须面对的问题之一。网页字体对于网页非常重要,它们决定了网页文本的外观和风格。
你可能遇到过一些问题,比如:
设计师提供的设计稿要求使用超过 8M 的授权字体库文件。
无法把字体包文件压缩到更小的文件,或是拆分成多个文件。
使用常规的 Web Font 方案后,页面加载速度变慢。
面对这些问题,我们应该如何有效地解决呢?虽然解决方案很多,但我们首先需要了解网页字体的基本概念。
字体库的组成
无论是系统字体还是外部字体,字体库通常由多个字体集组成,包括字重、字形、字宽等变体。根据字体在网页中的显示效果,又可分为样式、粗细、大小等三种类型。
样式包括正常和斜体两种,粗细度也分为三种:正常、粗体、较轻。字体大小可以用不同的单位来表示,例如像素 (px)、em 和 rem 等。
理论上,一个完整的字体库应该包含两种样式和三种粗细度。这就意味着一个字至少有 6 种风格。如果要包括所有文字,那么文字组合数量就会非常多。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
1. 网页字体文件大小是影响前端全链路性能的主要因素之一,需要通过优化文件下载等多种策略来解决网页字体引起的用户体验问题。 2. 优化方案中的方案1:避免使用多个外部第三方字体,建议使用一套第三方网页字体,并使用系统默认字体作为备选字体,避免增加网页字体文件对用户体验的影响。 3. 优化方案中的方案2:优先使用WOFF2格式文件,具有内置压缩功能和兼容性,是现代Web浏览器的首选。 4. 字体库的组成包括样式、粗细、大小等变体,一个完整的字体库应该包含两种样式和三种粗细度,导致字体文件较大的一个原因是大量的字符集和变体。 5. Web Font是专门设计用于网页显示的字体,需要考虑网络环境、跨平台兼容性、加载速度、可访问性等因素。 6. 网页字体加载器(Web Font Loader)是一个JavaScript库,可以让程序更好地控制字体加载。 7. `unicode-range` 属性是CSS提供给字体定义的字体子集,允许选择字符范围并告诉浏览器使用哪些字符,解决了下载较大文件慢的问题。 8. 使用CSS字体加载器(CSS Font Loading API)通过JavaScript代码控制字体的下载时机,可以解决加载字体文件过大的问题。 9. 用户降级方案可以在特定环境中只使用系统默认字体,以减少加载时间,提高用户体验。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《前端全链路优化实战课》,新⼈⾸单¥59
《前端全链路优化实战课》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论