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

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

DDD

发布： 2025-09-01 17:48:27

原创

747人浏览过

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

本文将详细介绍如何使用 CSS 的 @font-face 规则引入并应用自定义字体。我们将涵盖 @font-face 的基本语法、字体文件的引用方式、以及在 HTML 元素中应用自定义字体的步骤。通过本文，你将能够轻松地在你的网页设计中使用各种独特的字体，摆脱对“web-safe”字体的依赖。

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

@font-face 规则允许你在网页中使用不在用户系统上的字体。这极大地扩展了网页设计的可能性，使你能够使用更具创意和独特性的字体。

@font-face 规则的基本语法

@font-face 规则定义了自定义字体的名称和字体文件的位置。其基本语法如下：

@font-face {
  font-family: <font-family-name>;
  src: url(<font-file-path>);
  /* 其他可选属性，例如 font-weight, font-style 等 */
}

登录后复制

font-family: 指定自定义字体的名称。这个名称将在 CSS 中用于引用该字体。
src: 指定字体文件的 URL。可以指定多个 URL，浏览器会尝试按顺序加载字体文件，直到找到可用的文件。

字体文件的引用方式

src 属性可以接受多种字体文件格式，例如 .woff, .woff2, .ttf, .otf, .eot, .svg。建议使用 .woff2 格式，因为它具有更好的压缩率和浏览器兼容性。

以下是一些引用字体文件的示例：

/* 引用 woff2 格式的字体文件 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2');
}

/* 引用多种格式的字体文件，以提高兼容性 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype');
}

登录后复制

注意事项:

确保字体文件的路径是正确的，并且浏览器可以访问该文件。
建议将字体文件放在一个单独的文件夹中，例如 fonts/，以便于管理。
format() 函数用于指定字体文件的格式，这有助于浏览器更快地识别字体文件。

在 HTML 元素中应用自定义字体

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

body {
  font-family: 'MyCustomFont', sans-serif; /* 使用自定义字体，如果加载失败则使用 sans-serif */
}

h1 {
  font-family: 'MyCustomFont', serif; /* 使用自定义字体，如果加载失败则使用 serif */
}

登录后复制

在上面的示例中，body 元素和 h1 元素都使用了名为 'MyCustomFont' 的自定义字体。如果自定义字体加载失败，则会使用 sans-serif 或 serif 作为备用字体。

Hugging Face

Hugging Face AI开源社区

查看详情

完整示例

以下是一个完整的示例，演示了如何使用 @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.woff2') format('woff2');
}

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

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

登录后复制

项目结构:

project/
├── index.html
├── style.css
└── fonts/
    └── MyCustomFont.woff2

登录后复制

确保将 MyCustomFont.woff2 替换为你实际的字体文件。

总结

通过使用 @font-face 规则，你可以轻松地在网页中使用自定义字体，从而提升网页的视觉效果和用户体验。记住要选择合适的字体文件格式，并确保字体文件的路径是正确的。同时，提供备用字体可以确保在自定义字体加载失败时，网页仍然具有良好的可读性。

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

大家都在看：

CSS怎么直接嵌入HTML_CSS直接嵌入HTML的快速方法 CSS布局技巧：居中导航栏与表格的实践指南内部CSS怎么嵌入网页HTML_内部CSS嵌入网页HTML的详细解析 HTML与CSS跨设备兼容性：解决样式渲染问题的综合指南使用 Tailwind CSS 优化 Hover 和 Focus 状态样式的技巧