在网页开发中，默认的字体往往无法满足设计需求，使用外部ttf字体可以让页面呈现更独特的视觉效果，CSS提供了标准的语法来支持外部ttf字体的引用。
引用外部ttf字体的核心步骤
1. 准备ttf字体文件
首先需要获取对应的ttf格式字体文件，将文件放到项目的静态资源目录下，比如可以创建fonts文件夹存放所有字体文件，方便后续管理。
2. 使用@font-face规则定义字体
CSS的@font-face规则是引用外部字体的核心，通过该规则可以声明自定义字体的名称和对应的字体文件路径，基本语法如下：
/* 定义自定义字体 */
@font-face {
/* 自定义字体名称，后续使用该名称调用字体 */
font-family: 'MyCustomFont';
/* ttf字体文件的路径，支持相对路径和绝对路径 */
src: url('../fonts/my_font.ttf');
/* 可选：设置字体的粗细，默认是normal */
font-weight: normal;
/* 可选：设置字体的样式，默认是normal */
font-style: normal;
}
3. 在样式中使用自定义字体
定义好字体之后，就可以像使用系统默认字体一样，通过font-family属性调用自定义字体：
/* 给段落元素应用自定义字体 */
p {
font-family: 'MyCustomFont', sans-serif;
}
/* 给标题元素应用自定义字体 */
h2 {
font-family: 'MyCustomFont', serif;
}
这里建议在自定义字体名称后添加 fallback 字体，当自定义字体加载失败时，会自动使用后面的系统默认字体，避免页面样式错乱。
多格式字体兼容处理
虽然ttf字体在大多数现代浏览器中都能正常加载，但部分旧版本浏览器对ttf的支持有限，为了更好的兼容性，可以同时准备多种格式的字体文件，比如woff、woff2等，通过src属性按顺序声明多个字体路径：
@font-face {
font-family: 'MyCustomFont';
/* 浏览器会按顺序尝试加载，优先加载woff2，不支持再尝试后面的格式 */
src: url('../fonts/my_font.woff2') format('woff2'),
url('../fonts/my_font.woff') format('woff'),
url('../fonts/my_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
这里format属性用于指定字体文件的格式，帮助浏览器快速识别是否需要加载该文件，提升加载效率。
常见引用问题及解决办法
- 字体不生效：首先检查字体文件路径是否正确，相对路径是相对于当前CSS文件的位置；其次检查
font-family的名称是否和定义时完全一致，包括大小写和引号使用。 - 跨域问题：如果字体文件放在不同域名下，服务器需要设置正确的CORS响应头，允许字体文件被跨域请求，否则浏览器会阻止字体加载。
- 字体加载慢：可以对字体文件进行压缩，优先使用woff2格式的字体，它的体积比ttf小很多，能提升加载速度。
完整示例
下面是一个完整的HTML和CSS结合使用的示例，展示如何引用外部ttf字体并应用到页面元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS引用ttf字体示例</title>
<style>
@font-face {
font-family: 'CustomTTFFont';
src: url('fonts/demo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.custom-text {
font-family: 'CustomTTFFont', Arial, sans-serif;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<p class="custom-text">这段文字使用了自定义的ttf字体显示</p>
</body>
</html>