星途面试题库

面试题：CSS 字体引入@font - face与Google Fonts在性能优化上的考量

从性能优化角度分析，@font - face和Google Fonts在字体文件加载、渲染阻塞以及如何减少对页面首次加载时间的影响等方面有哪些不同策略？

29.1万热度

难度

前端开发CSS

知识考点

AI 面试

面试题答案

字体文件加载

@font - face：
- 字体文件通常与网站资源一同部署在自己的服务器上。这使得开发者可以更好地控制字体文件的缓存策略，例如通过设置合适的Cache - Control头，让浏览器长时间缓存字体文件，减少重复下载。比如，对于不常更新的字体，可以设置较长的缓存时间（如一年），后续用户访问页面时若缓存未过期，就无需再次下载。
- 但同时，若服务器带宽有限，可能会因为字体文件的下载占用带宽，影响其他资源的加载速度。
Google Fonts：
- Google Fonts 是由 Google 提供的字体服务，字体文件存储在 Google 的服务器上。Google 的服务器网络基础设施强大，分布广泛，具有内容分发网络（CDN）的特性，能够根据用户的地理位置，从距离最近的服务器节点提供字体文件，加快下载速度。
- 然而，由于依赖外部服务器，若 Google 的服务器出现故障或网络波动，可能会影响字体文件的加载，导致页面字体显示异常。

渲染阻塞

@font - face：
- 浏览器在解析到@font - face规则时，会根据设置的字体加载策略来决定是否阻塞渲染。例如，使用font - display: swap策略时，浏览器会先使用系统默认字体渲染页面内容，同时异步加载自定义字体，当自定义字体加载完成后，再替换为自定义字体。这种方式可以减少对首次渲染时间的影响，用户能较快看到页面内容。
- 但如果使用font - display: block策略，浏览器会阻塞渲染，直到字体文件下载并解析完成，这可能导致页面白屏时间延长，影响用户体验。
Google Fonts：
- Google Fonts 默认采用font - display: swap的加载策略，以确保页面内容能尽快呈现给用户，减少渲染阻塞。这种策略下，用户可以快速看到页面大致内容，然后随着字体的加载完成，页面字体逐渐替换为自定义字体。

减少对页面首次加载时间的影响

@font - face：
- 优化字体文件大小是关键，可通过工具对字体文件进行压缩，去除不必要的字符集等方式，减小文件体积，加快下载速度。例如，对于只在中文页面使用的字体，可以去除英文字符集等冗余部分。
- 合理设置font - display值，如使用swap策略，避免渲染阻塞。同时，可以将@font - face规则放在文档头部<style>标签内，让浏览器尽早开始字体加载。
Google Fonts：
- 由于其 CDN 特性，本身在加载速度上有一定优势。开发者可以通过在 HTML 文档<head>部分尽早引入 Google Fonts 的链接，利用浏览器的并行下载机制，让字体文件与其他资源同时下载，减少整体加载时间。
- 此外，Google Fonts 还提供了一些优化选项，如按需加载特定字符集的字体，进一步减小文件体积，提高加载效率。