使用 @font-face 引入自定义字体：完整教程-html教程-PHP中文网

使用 @font-face 引入自定义字体：完整教程

花韻仙語

发布： 2025-09-01 18:29:00

原创

169人浏览过

使用 @font-face 引入自定义字体：完整教程

本文将详细介绍如何使用 CSS 的 @font-face 规则引入并应用自定义字体。通过本文，你将学会如何在网页中使用下载的字体文件，避免浏览器默认字体带来的局限性，从而提升网页的视觉效果和个性化程度。我们将提供清晰的代码示例和注意事项，助你轻松掌握这一实用技巧。

使用 @font-face 引入自定义字体

@font-face 规则允许开发者在网页中使用服务器上的字体，而无需依赖用户设备上已安装的字体。这为网页设计提供了更大的灵活性和自由度，可以实现更加个性化的视觉效果。

1. 声明 @font-face 规则

首先，需要在 CSS 中声明 @font-face 规则。该规则定义了字体的名称、字体文件的路径等信息。

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/my-custom-font.woff2') format('woff2'),
       url('path/to/my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

登录后复制

font-family: 指定字体的名称。这个名称将在后续的 CSS 规则中被引用，用于指定元素使用的字体。注意，名称要使用单引号或双引号包裹。
src: 指定字体文件的路径。可以使用相对路径或绝对路径。建议提供多种字体格式（如 WOFF2, WOFF, TTF, OTF）以兼容不同的浏览器。format() 函数用于指定字体文件的格式，帮助浏览器选择合适的字体文件。 WOFF2 格式是目前推荐的 Web 字体格式，因为它提供了更好的压缩率和性能。
font-weight: 指定字体的粗细。常见的取值有 normal (400), bold (700), lighter, bolder 以及数值 (100-900)。
font-style: 指定字体的样式。常见的取值有 normal (正常), italic (斜体), oblique (倾斜)。

2. 应用自定义字体

声明了 @font-face 规则后，就可以在 CSS 规则中使用 font-family 属性来应用自定义字体。

body {
  font-family: 'MyCustomFont', sans-serif;
}

h1 {
  font-family: 'MyCustomFont', serif;
}

.special-text {
  font-family: 'MyCustomFont', cursive;
}

登录后复制

在上面的例子中，body 元素将使用 MyCustomFont 字体。如果浏览器无法加载或识别该字体，将回退到 sans-serif 字体。类似地，h1 元素和 .special-text 类将分别使用 serif 和 cursive 作为备用字体。

3. 确保字体文件路径正确

最常见的问题是字体文件路径错误。请仔细检查 src 属性中指定的字体文件路径是否正确。可以使用浏览器的开发者工具来检查字体文件是否成功加载。如果字体文件加载失败，开发者工具会显示相应的错误信息。

4. 浏览器缓存

有时候，即使字体文件路径正确，浏览器也可能无法正确加载字体。这可能是因为浏览器缓存了旧的字体文件。可以尝试清除浏览器缓存，或者使用强制刷新（Ctrl + Shift + R 或 Cmd + Shift + R）来重新加载页面。

Hugging Face

Hugging Face AI开源社区

查看详情

5. 字体格式兼容性

不同的浏览器对字体格式的支持程度不同。为了确保最佳的兼容性，建议提供多种字体格式，例如 WOFF2, WOFF, TTF 和 OTF。

示例代码

以下是一个完整的示例，展示了如何使用 @font-face 规则引入并应用自定义字体：

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Custom Font Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>This is a heading with a custom font.</h1>
  <p>This is a paragraph with a custom font.</p>
</body>
</html>

登录后复制

CSS (style.css):

@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;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

h1 {
  font-family: 'MyCustomFont', serif;
}

登录后复制

目录结构:

my-project/
├── index.html
├── style.css
└── fonts/
    ├── MyCustomFont-Regular.woff2
    └── MyCustomFont-Regular.woff

登录后复制

注意事项

字体授权: 确保你有权使用你所使用的字体。某些字体可能需要购买授权才能在网页上使用。
字体文件大小: 字体文件的大小会影响网页的加载速度。尽量选择压缩率较高的字体格式（如 WOFF2），并对字体文件进行优化。
跨域问题: 如果字体文件位于不同的域名下，可能会遇到跨域问题。需要配置服务器以允许跨域访问字体文件。通常通过设置 Access-Control-Allow-Origin HTTP 响应头来解决。

总结

@font-face 规则是 CSS 中一个非常强大的功能，它允许开发者在网页中使用自定义字体，从而实现更加个性化的视觉效果。通过本文的介绍，你应该已经掌握了如何使用 @font-face 规则引入并应用自定义字体。请记住，确保字体文件路径正确，提供多种字体格式，并注意字体授权和文件大小，以获得最佳的效果。

以上就是使用 @font-face 引入自定义字体：完整教程的详细内容，更多请关注php中文网其它相关文章！