使用 @font-face 引入自定义字体：完整教程
在现代网页设计中，字体不仅仅用于传递文字信息，更是品牌形象和用户体验的重要组成部分。通过 @font-face 规则，开发者可以突破系统内置字体的限制，将自定义字体直接嵌入网页中，确保每个用户都能看到设计师精心选择的字体样式。本文将系统介绍 @font-face 的语法、使用方法、常见格式以及最佳实践，帮助你轻松掌握自定义字体的引入技巧。
什么是 @font-face？
@font-face 是 CSS 中的一个规则，它允许网页从远程或本地服务器加载字体文件，并将其应用到指定的文本元素上。与传统的依赖用户操作系统安装字体的方式不同，@font-face 确保了字体的跨平台一致性。无论用户使用 Windows、macOS 还是移动设备，只要支持相应的字体格式，都能正确显示。
基本语法
一个标准的 @font-face 规则包含以下关键属性：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff'),
url('fonts/MyCustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}属性解析：
font-family：自定义的字体名称，用于在 CSS 中引用。
src：字体文件的路径和格式声明，支持多个备用来源。
font-weight：该字体对应的字重，如 normal、bold 或数值 400、700。
font-style：字体的样式，normal、italic 或 oblique。
font-display：控制字体加载时的渲染行为，推荐使用
swap以提升用户体验。
字体格式与兼容性
现代浏览器主要支持以下几种字体格式：
| 格式 | 文件扩展名 | 浏览器兼容性 | 特点 |
|---|---|---|---|
| WOFF2 | .woff2 | 现代浏览器（Chrome、Firefox、Safari、Edge 最新版） | 压缩率最高，推荐首选 |
| WOFF | .woff | 所有现代浏览器，包括较旧版本 | 广泛支持，压缩率良好 |
| TrueType | .ttf | 几乎所有浏览器 | 兼容性最好，但文件较大 |
| OpenType | .otf | 与 TrueType 类似 | 支持更多排版特性 |
| EOT | .eot | 仅 Internet Explorer | 对于旧版 IE 有必要 |
| SVG Font | .svg | 仅旧版 Safari 和 iOS | 已基本淘汰 |
完整使用示例
1. 准备字体文件
首先，你需要拥有合法的字体文件。可以从 Google Fonts、Adobe Fonts 等字体库下载，或购买商业字体。假设你有一个名为 "OpenSans" 的字体，将其放入项目的 fonts/ 目录中。
2. 编写 CSS @font-face 规则
/* 定义常规字体 */
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
url('fonts/OpenSans-Regular.woff') format('woff'),
url('fonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* 定义粗体字体 */
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
url('fonts/OpenSans-Bold.woff') format('woff'),
url('fonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* 定义斜体字体 */
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Italic.woff2') format('woff2'),
url('fonts/OpenSans-Italic.woff') format('woff'),
url('fonts/OpenSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}3. 在页面中应用字体
body {
font-family: 'OpenSans', sans-serif;
font-weight: 400;
}
h1 {
font-family: 'OpenSans', sans-serif;
font-weight: 700;
}
em {
font-family: 'OpenSans', sans-serif;
font-style: italic;
}注意：为了确保文本在不支持自定义字体的浏览器中仍可阅读，必须在 font-family 中提供后备字体，如 sans-serif 或 serif。
字体转换工具
如果你只有一种格式的字体文件，可以使用在线工具将其转换为其他格式。推荐使用以下工具：
Font Squirrel Webfont Generator：提供完整的字体包生成服务
Transfonter：支持批量转换多种格式
Google Fonts：可直接下载包含多种格式的字体包
性能优化与最佳实践
1. 压缩字体文件
使用工具减少字体文件的体积。WOFF2 格式通常是最佳选择，因为它提供最高的压缩率。例如，一个 100KB 的 TTF 字体转换为 WOFF2 后可能只有 30KB。
2. 使用 font-display 控制加载行为
font-display 属性有五个可选值：
auto：浏览器默认行为，通常忽略自定义字体的限制。block：字体加载期间隐藏文本（最多 3 秒），加载后立即显示。swap：立即使用后备字体显示文本，自定义字体加载后替换。fallback：短期阻塞（约 100 毫秒），其后使用后备字体，如果字体在 3 秒内加载完成则替换。optional：极短的阻塞时间（约 100 毫秒），如果字体未加载完成，则继续使用后备字体。
推荐使用 swap，以确保用户不会长时间看到空白文本。
3. 按需加载字体
不要一次性加载所有字重和样式。只为实际使用的字重和样式定义 @font-face 规则。例如，如果页面只需常规和粗体，就不要加载斜体或超粗体。
4. 使用子集化字体
如果字体只用于显示特定语言，可以考虑使用子集化（subsetting）技术，移除不需要的字符，从而大幅减少字体文件大小。许多转换工具都支持子集化选项。
5. 避免跨域问题
如果字体文件托管在另一个域名下（例如 CDN），请确保该服务器设置了正确的 CORS 头，例如 Access-Control-Allow-Origin: *。否则，浏览器会拒绝加载字体。
常见问题与解决
Q1: 字体无法加载显示，浏览器控制台提示 404 错误
请检查字体文件的路径是否正确。推荐使用相对路径，并确认文件确实存在于指定目录。如果使用 Webpack 或 Vite 等构建工具，需要配置字体文件的加载规则。
Q2: 字体出现在浏览器控制台的 "失败加载" 错误
这可能是由于跨域问题。如果字体文件托管在外部 CDN，请确保服务器设置了正确的 Access-Control-Allow-Origin 头。
Q3: 页面首次加载时文本显示为空白或 "闪出" 现象
这是因为字体加载延迟引起的。解决方法：
使用
font-display: swap允许后备字体立即显示。考虑在 HTML 的
<head>中使用<link rel="preload">预加载主要字体文件。
示例：
<head> <link rel="preload" href="fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin> </head>
Q4: 字体在所有浏览器中都不生效
请检查字体文件是否损坏，并确保你在 src 中提供了浏览器支持的格式。使用开发工具（如 Chrome DevTools）的 "网络" 面板检查请求是否成功。
总结
@font-face 是为网页添加个性字体的强大工具，但需要结合实际需求进行合理优化。通过选择正确的字体格式、使用 font-display 控制加载行为、压缩文件、实施子集化和预加载技术，你可以在不影响性能的情况下，为网站带来独特的视觉风格。记住，始终提供合法的字体文件，并尊重字体的使用许可。现在就去尝试，为你的下一个项目增添一丝视觉魅力吧！