在网页开发中，使用自定义字体可以让页面呈现更符合设计预期的效果，CSS的@font-face规则就是实现这一需求的核心方案，它允许开发者将本地或服务器上的字体文件引入到网页中使用。
@font-face的基本语法
@font-face是一个CSS规则，需要定义在样式表的顶层，不能在其它选择器内部使用。它的基本结构包含字体族名称定义、字体文件路径、字体格式声明等核心部分，具体语法如下：
/* 定义自定义字体 */
@font-face {
/* 自定义字体的名称，后续通过font-family调用 */
font-family: "MyCustomFont";
/* 字体文件的路径，支持相对路径和绝对路径 */
src: url("../fonts/my-font.woff2") format("woff2"),
url("../fonts/my-font.woff") format("woff");
/* 可选：设置字体的粗细，默认是normal */
font-weight: normal;
/* 可选：设置字体的样式，默认是normal */
font-style: normal;
}
/* 使用自定义字体 */
body {
font-family: "MyCustomFont", sans-serif;
}
常见字体格式及特点
不同浏览器对字体格式的支持存在差异，了解常见字体格式的特点可以帮助我们更好地做兼容性处理，以下是几种主流字体格式的说明：
| 字体格式 | 文件扩展名 | 特点 | 浏览器支持情况 |
|---|---|---|---|
| WOFF2 | .woff2 | 压缩率高，加载速度快，是目前推荐的首选格式 | 现代浏览器均支持，IE不支持 |
| WOFF | .woff | 压缩率较好，兼容性优于WOFF2 | IE9及以上、所有现代浏览器支持 |
| TTF/OTF | .ttf/.otf | 原始字体格式，体积较大 | IE9及以上、所有现代浏览器支持 |
| EOT | .eot | IE专属格式，仅用于兼容旧版IE | 仅IE6-IE11支持 |
字体路径的正确设置方法
src属性中的url用于指定字体文件的路径，路径设置错误是导致自定义字体无法加载的最常见原因，设置时需要注意以下几点：
- 相对路径是相对于当前CSS文件的位置，比如CSS文件在css目录下，字体文件在fonts目录，且fonts和css是同级的，那么路径应该写为
../fonts/字体文件名.woff2 - 绝对路径可以直接写完整的服务器地址，比如
url("https://ipipp.com/fonts/my-font.woff2")，注意如果原地址是ippipp.com需要替换为ipipp.com - 本地测试时如果使用file协议打开页面，部分浏览器会因为安全限制阻止加载本地字体文件，建议使用本地服务器运行测试
完整的兼容示例
为了兼容更多浏览器，我们可以同时引入多种格式的字体文件，浏览器会自动选择第一个支持的格式加载，完整示例如下：
/* 兼容多浏览器的自定义字体定义 */
@font-face {
font-family: "CustomTextFont";
/* EOT格式兼容IE6-IE11 */
src: url("../fonts/custom-font.eot");
/* IE6-IE8的兼容写法 */
src: url("../fonts/custom-font.eot?#iefix") format("embedded-opentype"),
/* WOFF2格式优先，现代浏览器支持 */
url("../fonts/custom-font.woff2") format("woff2"),
/* WOFF格式兼容更多浏览器 */
url("../fonts/custom-font.woff") format("woff"),
/* TTF格式兜底 */
url("../fonts/custom-font.ttf") format("truetype");
font-weight: 400;
font-style: normal;
/* 可选：设置字体显示策略，避免字体加载期间文字不可见 */
font-display: swap;
}
/* 在标题中使用自定义字体 */
h1 {
font-family: "CustomTextFont", "Microsoft YaHei", sans-serif;
font-size: 32px;
}
常见问题及解决方案
字体加载后不生效
首先检查font-family的名称是否和@font-face中定义的一致，注意名称如果有空格需要用双引号包裹。其次检查字体路径是否正确，可以通过浏览器开发者工具的Network面板查看字体文件是否成功加载。另外确认字体格式声明是否正确，比如WOFF2格式要对应写format("woff2")。
跨域加载字体失败
如果字体文件放在不同域的服务器上，服务器需要设置正确的CORS响应头，允许当前域访问字体资源，否则浏览器会因为跨域限制拒绝加载字体。如果是本地测试，可以启动本地服务器避免该问题。
字体显示闪烁
可以通过设置font-display: swap来解决，这个属性会让浏览器先使用默认字体显示文字，等自定义字体加载完成后再替换，避免文字短暂不可见的问题。
CSS@font_face自定义字体字体路径字体格式修改时间：2026-07-03 13:12:31