优化网页字体
内容提要
本文讨论了优化网页字体以提升用户体验和减少布局变化的方法。开发者可以通过使用font-display属性控制字体加载行为，选择合适的后备字体和size-adjust描述符以保持文本大小一致，避免布局变化。此外，利用preconnect和preload资源提示可以加快字体下载速度。对于使用Next.js的开发者，next/font模块可自动处理字体优化，简化开发流程。
延伸解读
font-display 各取值的权衡
font-display 的五个取值对应不同的加载策略：block 优先视觉一致性，但文本会短暂不可见；swap 立即显示后备字体，加载后切换；fallback 在短暂不可见后使用后备字体，若 3 秒内未加载则不再切换；optional 由浏览器根据网络状况决定，仅当字体在 100ms 内可用时才使用；auto 则交由浏览器决定，通常等同于 swap。开发者需根据品牌重要性和用户体验目标选择。
减少布局偏移的关键：匹配后备字体
即使后备字体与网页字体具有相同的 font-size，由于字体度量不同，仍可能导致布局偏移。使用 size-adjust 描述符可以按百分比缩放字体的所有度量，使文本大小大致保持一致。此外，ascent-override、descent-override 和 line-gap-override 等 CSS 描述符可进一步微调上升、下降和行间距，从而在字体切换时最小化布局变化。
利用资源提示加速字体加载
preconnect 和 preload 是两种有效的资源提示。preconnect 让浏览器在页面开始加载时即与字体服务器建立连接，从而缩短下载时间；preload 则指示浏览器尽早开始获取字体，通常在渲染页面之前，以避免字体渲染延迟或变化。合理使用这两种提示可以显著提升字体加载速度，带来更流畅的用户体验。
Next.js 的 next/font 自动化优化
对于 Next.js 项目，next/font 模块可以自动处理字体优化，减少手动配置的负担。它在构建时下载字体样式表和文件并本地提供，消除外部请求；同时生成与网页字体高度匹配的后备字体，并自动计算 size-adjust、ascent-override 等度量；此外，当定义了子集时还会自动预加载字体。这些功能有助于实现最小甚至无布局偏移，且无需额外开发工作。
Q&A
如何优化网页字体以提升用户体验？
可以通过使用font-display属性、选择合适的后备字体和size-adjust描述符来优化网页字体，减少布局变化。
font-display属性有哪些选项？
font-display属性的选项包括block、swap、fallback、optional和auto，开发者可以根据需求选择合适的选项。
使用fallback字体时需要注意什么？
使用fallback字体时，确保其与目标网页字体相似，以减少布局变化。
如何加快网页字体的下载速度？
可以使用preconnect和preload资源提示来加快网页字体的下载速度，提升用户体验。
Next.js中的next/font模块有什么优势？
next/font模块可以自动处理字体优化，简化开发流程，减少开发者的工作量，并确保用户体验良好。
size-adjust描述符的作用是什么？
size-adjust描述符可以帮助保持文本大小一致，避免因字体切换而导致的布局变化。
