CSS @font-face：正确加载和应用自定义字体的教程
在网页设计中，字体的选择直接影响用户体验和品牌形象。然而，并非所有用户电脑都安装了设计师期望的字体。CSS 的 @font-face 规则正是为解决这一问题而生，它允许开发者将自定义字体文件托管在服务器上，并让浏览器下载并应用于网页。本教程将详细讲解如何正确加载和应用自定义字体。
一、理解 @font-face 规则
@font-face 是 CSS 中的一个规则，它允许你定义一个字体族名称，并指向一个或多个字体文件。当浏览器解析到使用了该字体族的元素时，会自动从指定位置下载字体文件。
一个基本的 @font-face 规则结构如下：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}这里我们定义了一个名为 MyCustomFont 的字体族。浏览器会先尝试加载 woff2 格式，如果不支持，则回退到 woff 格式。后续的 font-weight 和 font-style 用于指定该字体文件的字重和样式，确保在使用时能正确匹配。
二、字体格式与跨浏览器兼容性
不同的浏览器支持不同的字体格式。为了确保最大兼容性，你需要提供多种格式的字体文件。常用的字体格式包括：
| 格式 | 文件扩展名 | 主要支持浏览器 |
|---|---|---|
| WOFF2 | .woff2 | 现代浏览器（Chrome、Firefox、Edge、Safari 等） |
| WOFF | .woff | 大多数现代浏览器，包括较旧版本 |
| TTF/OTF | .ttf 或 .otf | 较旧浏览器（如 IE9+，以及部分移动浏览器） |
| EOT | .eot | 仅限 Internet Explorer（IE6-11） |
| SVG | .svg | 早期 Safari 和 iOS 浏览器（已过时） |
为了最大化兼容性，通常建议提供 WOFF2 和 WOFF 文件即可覆盖绝大多数现代浏览器。如果需要支持 IE 等老浏览器，则需加上 EOT 文件。
二、声明 @font-face 规则
在 CSS 文件中，定义 @font-face 规则一般放在其他样式之前，以确保浏览器尽早下载字体。你可以为同一字体的不同变体（如粗体、斜体）分别定义规则。
以下是一个完整的示例，为自定义字体定义了四个变体：
/* 常规 */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'),
url('fonts/MyCustomFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 斜体 */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Italic.woff2') format('woff2'),
url('fonts/MyCustomFont-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
/* 粗体 */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Bold.woff2') format('woff2'),
url('fonts/MyCustomFont-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
/* 粗斜体 */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-BoldItalic.woff2') format('woff2'),
url('fonts/MyCustomFont-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}四、应用自定义字体
定义好 @font-face 规则后，你就可以像使用系统字体一样使用这个自定义字体了：
body {
font-family: 'MyCustomFont', Arial, sans-serif;
font-weight: normal;
}
h1 {
font-family: 'MyCustomFont', Georgia, serif;
font-weight: bold;
}在 font-family 属性中，将自定义字体名放在第一位，后面跟上后备字体。这样即使自定义字体加载失败，浏览器也会使用后备字体显示内容。
五、字体显示策略：font-display
font-display 属性控制字体在加载期间的行为，对优化用户体验至关重要。常用值包括：
swap：立即使用后备字体显示文本，字体加载完成后立即替换（推荐用于大多数情况）。
block：浏览器会在短时间内隐藏文本，直到字体加载完成（可能造成空白闪烁）。
fallback：短暂等待字体加载，如果超时则使用后备字体，后续不再替换。
optional：浏览器判断网络状态，如果加载快则使用，否则使用后备字体（适合低速网络）。
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2');
font-display: swap;
}六、字体预加载（Performance）
为了加快字体加载速度，你可以在 HTML 的 <head> 中使用 <link rel="preload"> 提前请求字体文件：
<head> <link rel="preload" href="fonts/MyCustomFont-Regular.woff2" as="font" type="font/woff2" crossorigin> </head>
注意添加 crossorigin 属性，因为字体文件通常通过跨域请求加载。这样做可以显著降低首次内容绘制（FCP）时间。
七、处理跨域问题（CORS）
如果你将字体文件托管在另一个域名（例如 CDN），浏览器会触发跨域请求。确保服务器配置了适当的 CORS 头部：
# 在 .htaccess 或服务器配置中添加 Header set Access-Control-Allow-Origin "*"
或者，你也可以将字体文件放在与网站相同的域名下，以避免跨域问题。
八、实战示例：从加载到应用
下面是一个完整的 HTML 示例，演示如何加载和应用自定义字体：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义字体示例</title>
<link rel="preload" href="fonts/MyCustomFont-Regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'),
url('fonts/MyCustomFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyCustomFont', Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 1.6;
}
h1 {
font-family: 'MyCustomFont', Georgia, serif;
font-weight: bold;
}
</style>
</head>
<body>
<h1>欢迎使用自定义字体</h1>
<p>这段文本将使用 MyCustomFont 字体显示。如果字体加载失败，将使用后备字体。</p>
</body>
</html>九、常见问题排查
字体不生效：检查文件路径是否正确，浏览器控制台是否显示 404 错误。确保
@font-face规则在应用字体之前定义。字体闪烁（FOUT）：使用
font-display: swap可以减少视觉影响，但无法完全避免。这是正常行为。跨域错误：检查服务器是否添加了正确的 CORS 头部，特别是使用 CDN 时。
字体格式不支持：确保提供了足够的备选格式（如 woff2, woff）。
十、总结
通过 @font-face，你可以为网站添加强大的自定义字体体验。记住以下关键点：
提供多种字体格式以确保跨浏览器兼容性。
为同一字体的不同变体分别定义规则。
设置
font-display: swap以优化加载体验。使用
<link rel="preload">提升性能。确保字体文件路径正确且允许跨域访问。
掌握这些技巧，你的网页将拥有更丰富、更具个性化的排版效果。