在网页开发过程中，默认的系统字体样式比较单一，当需要实现特殊的文字视觉效果时，引入自定义OTF字体文件是常用的解决方案，通过CSS的@font-face规则可以轻松完成OTF字体的加载和应用。
@font-face规则基本语法
@font-face是CSS3中定义的规则，用于定义自定义字体，让浏览器可以下载并使用指定的字体文件，基本语法结构如下：
/* 定义自定义字体 */
@font-face {
font-family: 'CustomFont'; /* 自定义字体名称，后续使用时的标识 */
src: url('fonts/custom.otf') format('opentype'); /* 字体文件路径和格式 */
font-weight: normal; /* 字体粗细，可选normal、bold等 */
font-style: normal; /* 字体样式，可选normal、italic等 */
}
其中font-family是自定义的字体名称，后续在CSS中设置字体时会用到这个名称；src属性指定OTF字体文件的路径，format('opentype')用于声明字体格式，帮助浏览器快速识别文件类型。
完整使用步骤
1. 准备OTF字体文件
首先将需要使用的OTF字体文件放到项目的静态资源目录中，通常建议放在项目的fonts文件夹下，方便统一管理，比如路径为static/fonts/my_font.otf。
2. 编写@font-face规则
在CSS文件或者<style>标签中添加@font-face规则，指定字体文件的路径和自定义名称，示例如下：
/* 全局样式或者单独的样式文件中定义 */
@font-face {
font-family: 'MyOTFFont';
src: url('../fonts/my_font.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
3. 应用自定义字体
定义好字体之后，就可以在需要的元素上使用这个自定义字体了，通过font-family属性调用之前定义的名称即可：
/* 给所有段落应用自定义字体 */
p {
font-family: 'MyOTFFont', sans-serif; /* 后面加fallback字体，防止加载失败 */
}
/* 给特定类名的元素应用 */
.custom-text {
font-family: 'MyOTFFont', serif;
font-size: 18px;
color: #333;
}
4. HTML页面中使用
对应的HTML结构只需要正常编写内容即可，不需要额外特殊标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTF字体使用示例</title>
<style>
@font-face {
font-family: 'MyOTFFont';
src: url('fonts/my_font.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
.custom-text {
font-family: 'MyOTFFont', sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<p class="custom-text">这是使用OTF自定义字体显示的文本内容</p>
<p>这是使用默认字体显示的文本内容</p>
</body>
</html>
注意事项
- 字体文件路径必须正确，相对路径是相对于当前CSS文件的位置，绝对路径需要保证可以正常访问。
- OTF字体文件体积通常比较大，会影响页面加载速度，建议只对必要的文字使用，或者进行字体文件压缩。
- 部分旧版本浏览器对OTF格式的支持有限，如果需要兼容旧浏览器，可以同时准备TTF格式的字体文件，在src中多添加一个url声明：
src: url('fonts/my_font.ttf') format('truetype'), url('fonts/my_font.otf') format('opentype'); - 使用自定义字体需要注意版权问题，确保使用的OTF字体文件有合法的商业使用授权，避免侵权。
常见问题解决
字体不生效怎么办
首先检查字体文件路径是否正确，可以在浏览器开发者工具的Network面板查看字体文件是否成功加载；其次检查font-family的名称是否和定义时完全一致，包括大小写；最后确认元素是否被其他更高优先级的CSS规则覆盖了字体设置。
跨域问题
如果字体文件放在不同域的服务器上，可能会遇到跨域限制，需要在服务器配置中添加对应的CORS响应头，允许字体文件的跨域请求，比如Nginx可以添加如下配置：
location ~* .(otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
HTMLOTF_font@font_faceCSS修改时间：2026-07-20 08:45:26