通过link标签引入css可尽早加载字体，避免@import导致的延迟；2. 使用font-display:swap;优化渲染，防止foit；3. 预加载关键字体并设置crossorigin；4. 优先采用woff2格式并子集化；5. 结合媒体查询按需加载，减少冗余请求。
在网页开发中，CSS的引入方式与字体加载策略直接影响页面性能和用户体验。合理结合二者，能有效减少渲染阻塞、加快文本显示，避免“隐形文本闪烁”（FOIT）或“未样式文本闪烁”（FOUT）。以下是几种常见实践与优化技巧。
1. CSS引入方式对字体加载的影响
CSS是字体资源的“入口”，不同的引入方式决定了浏览器何时发现并请求字体文件。
- link标签引入外部样式表（推荐）：将CSS通过css">引入，是最标准的方式。浏览器解析到该标签后会尽快发起CSS请求，一旦CSSOM构建完成，就会触发对@font-face定义的字体的下载。
- @import导入：在CSS中使用@import url('fonts.css');会导致额外的请求延迟，因为必须先下载主CSS文件才能发现导入规则，进而请求字体，不推荐用于关键字体。
- 内联样式（慎用）：将CSS直接写在标签中可提升优先级，适合关键路径上的字体声明。但若包含大体积字体base64编码，则增加HTML体积，影响首屏渲染。
2. 使用font-display优化字体渲染行为
font-display是控制字体加载期间文本显示方式的关键属性，建议在所有@font-face中设置。
- font-display: swap;：允许文本先用系统字体显示，等自定义字体加载完成后再切换，避免长时间空白（FOIT），适合大多数场景。
- font-display: optional;：字体加载优先级极低，仅在网络空闲时尝试加载，失败则始终使用备用字体，适合非关键装饰性字体。
- font-display: fallback;：平衡swap和optional，提供短暂等待期，适合品牌字体但不想显著影响性能的情况。
@font-face {
font-family: 'CustomFont';
src: url('webfont.woff2') format('woff2');
font-display: swap;
}
3. 预加载关键字体（preload）
通过提前告知浏览器关键字体资源，提升加载优先级。
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="webfont.woff2" as="font" type="font/woff2" crossorigin>
注意：必须添加crossorigin属性，即使同源，否则会重复请求；同时确保MIME类型正确（如type="font/woff2"）。
4. 字体格式选择与压缩
优先使用WOFF2格式，它具备最佳压缩率和现代浏览器支持。旧格式如TTF或EOT应作为降级方案。
5. 结合媒体查询按需加载
针对不同设备加载不同字体，例如标题字体只在桌面端加载。
@media (min-width: 768px) {
@font-face {
font-family: 'DisplayFont';
src: url('display.woff2') format('woff2');
font-display: swap;
}
}
这样移动端不会浪费带宽下载无用字体。
基本上就这些。关键是让字体尽早被发现、合理控制渲染行为，并减少资源负担。搭配HTTP缓存和CDN，效果更佳。
