1. @font-face 声明基础与核心概念
1.1 语法结构与核心字段
在 HTML 中使用 @font-face 的第一步，需要理解它的 语法结构 与 核心字段，包括 font-family、src、font-weight、font-style 与 font-display。本文聚焦于 HTML 中使用 @font-face 加载字体的完整教程：从声明到跨浏览器兼容与性能优化，以确保从根本上把字体加载流程讲清楚。
font-family 用于为字体族取一个名称，后续在 CSS 中通过font-family来应用，比如 body { font-family: 'MyFont', serif; }。src 字段则列出字体资源的路径与格式，通常包含多种格式以覆盖不同浏览器。通过合理组合，可以实现稳定的字体回退。
@font-face {font-family: 'MyFont';src: url('/fonts/MyFont.woff2') format('woff2'),url('/fonts/MyFont.woff') format('woff');font-weight: 400 700;font-style: normal;font-display: swap;
}
在实际使用中，font-family 的命名要尽量具有描述性与可重复性，避免与系统字体冲突。font-weight 与 font-style 的组合决定了字体族内具体字形的可用性，搭配良好可提升渲染稳定性。若仅提供单一字重，浏览器会在需要时回退到其他字重，可能产生意外变化，因此应尽量覆盖常用字重。
1.2 字体格式与属性要点
字体格式 的选择直接影响跨浏览器兼容性和文件体积。常见的两种高效格式是 WOFF2 与 WOFF，它们在大多数现代浏览器中得到广泛支持。对于老旧浏览器，可以再提供 TTF/OTF 作为兜底资源。将多种格式放在 src 字段的逗号分隔列表中，是实现无缝降级的普遍做法。
font-display 属性用于控制字体加载时的呈现策略，常用选项包括 swap、fallback、optional 等。font-display: swap 能确保文本在字体加载过程中保持可读性，显著提升首次渲染速度与 CLD 指标。
1.3 代码示例与演示
下面的代码示例展示了一个完整的 @font-face 声明，包含多格式资源、字重区间与显示策略。请在实际项目中替换为自有版权字体文件路径。代码示例有助于快速验证跨浏览器行为。
要在页面中应用该字体，请在全局样式中使用 font-family 指定名称，并结合回退字体。
@font-face {font-family: 'MyFont';src: url('/fonts/MyFont.woff2') format('woff2'),url('/fonts/MyFont.woff') format('woff');font-weight: 400 700;font-style: normal;font-display: swap;
}
body {font-family: 'MyFont', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
2. 跨浏览器兼容性与回退策略
2.1 浏览器对字体格式的支持概览
为了实现跨浏览器兼容性，需要了解主流浏览器对各种字体格式的支持情况。WOFF2 在现代 Chrome、Firefox、Edge、Safari 等浏览器中表现最佳，但对极老版本的浏览器可能不支持。为了避免渲染差异，通常会在 src 中提供多种格式的回退入口。通过合理的排序，浏览器会优先选择兼容的资源，从而保证文本可读性。
另外，跨域资源 也会影响字体加载的成功率。对于跨域资源，需要服务器端开启 CORS，并在前端的 font-face 声明中确保请求头一致。若未配置，某些浏览器会阻止字体加载并降级显示。
2.2 回退策略与字体展示
在回退策略中，一个常用做法是将本地系统字体作为首选，随后逐步降级到网络字体。font-display: swap 与回退字体组合可以避免“无字形占位”的尴尬场景。对于中文环境，建议同时包含常见中文字体的回退，以确保字符集覆盖。
请记住，一致性与可访问性是设计字体回退策略的核心，确保在不同屏幕、不同网络条件下都能呈现可读文本。以下是一个典型回退序列的要点：先加载自定义字体，如果失败则回退到系统字体，最后再回退到备用字体族。
@font-face {font-family: 'MyFont';src: url('/fonts/MyFont.woff2') format('woff2');font-display: swap;
}
body {font-family: 'MyFont', 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif;
}
3. 性能优化与加载策略
3.1 字体子集化与资源管理
为了尽可能减少网络传输与提升首次渲染速度，字体子集化是一项关键优化。通过只保留页面所需的字符集，可以显著降低字体文件大小，减少下载时间。对于多语言站点，建议按语言单独生成子集，并按域名或路由进行按需加载。
资源定位要清晰，避免将字体文件分散在不易缓存的位置。统一的 /fonts 目录、明确的版本号以及一致的 缓存策略，有利于客户端的重复加载和离线体验。
@font-face {font-family: 'MyFont';src: url('/fonts/MyFont-subset.woff2') format('woff2');font-display: swap;
}
3.2 预加载、缓存与网络友好
实现快速字体呈现的另一个关键是通过 preload 提前加载字体资源，配合浏览器的缓存机制，能在页面渲染前就完成字体下载。合理设置 Cache-Control 与 ETag，可以让字体资源在返回后长期缓存，减少重复的网络请求。
在实际部署中，跨域字体加载需要确保服务器配置允许作为字体资源的跨域请求。若未设置 CORS，部分浏览器会阻止字体加载，影响页面的字体呈现。
/* 服务器端缓存配置示例（示意） */
location /fonts/ {add_header Cache-Control "public, max-age=31536000, immutable";add_header Access-Control-Allow-Origin "*";
}
4. 实践要点与部署指南
4.1 生产环境中的部署要点
在生产环境中，字体资源的版本化很重要。通过在字体文件名中包含版本号，可以实现无缝的缓存更新，避免旧字体被浏览器缓存影响。并且应确保文档中引用的字体路径正确，相对路径与绝对路径的选择要一致，以减少资源加载错误。
同时，CDN 加速是提升全球用户体验的有效手段。将字体资源放在就近的 CDN 节点，可以降低延迟，提升首次字体渲染的速度与稳定性。
@font-face {font-family: 'MyFont';src: url('https://cdn.example.com/fonts/MyFont.woff2') format('woff2');font-display: swap;
}
4.2 与前端构建工具的集成
在现代前端工作流中，构建工具（如 Webpack、Vite、Rollup）可以帮助自动化处理字体资源。通过配置相应的加载器/插件，可以在打包阶段对字体进行子集化、版本化与哈希命名，从而实现更高效的缓存与加载。
此外，代码分割与 懒加载 策略也可结合字体加载，以在首屏优先渲染的同时延迟加载其他字体字重和语言字体，提升整体验。
// 假设使用 Webpack 配置，生成版本化字体资源的示例
module.exports = {module: {rules: [{test: /\.(woff2|woff|ttf)$/,loader: 'url-loader',options: {limit: 10000,name: 'fonts/[name].[contenthash:8].[ext]'}}]}
}
5. 版权、许可与托管注意事项
5.1 授权与字体托管选项
在正式使用任何字体前，必须确认授权许可与使用范围。商业项目需要具备明确的授权条款，避免版权风险。若选择将字体托管在网络上，需确保提供商对托管方式的允许，并遵循其许可要求。
常见的托管方案包括将字体放置在自有服务器、使用 CDN 加速、以及借助字体服务提供商提供的托管方案。跨域加载时，请遵循服务器端的 CORS 要求，以确保字体能够正确地加载并呈现。
# Nginx 服务器示例：允许字体跨域加载并设置缓存
location ~* \.(woff2|woff|ttf)$ {add_header Cache-Control "public, max-age=31536000, immutable";add_header Access-Control-Allow-Origin "*";
}
5.2 版权合规与合规性检查
除了技术实现，版权合规也是不可忽视的环节。保持字体来源清晰、保留许可证明，并在必要时提供字体的授权证书。对于开源字体，需遵循其许可条款并在站点页脚或合适位置标注字体来源。
在跨团队协作中，建立字体资源清单与版本追踪，可以降低风险、提高维护效率，同时也有助于 SEO 对页面资源的稳健管理。
