本文将详细介绍如何使用 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 作为备用字体。
完整示例
以下是一个完整的示例，演示了如何使用 @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 规则，你可以轻松地在网页中使用自定义字体，从而提升网页的视觉效果和用户体验。记住要选择合适的字体文件格式，并确保字体文件的路径是正确的。同时，提供备用字体可以确保在自定义字体加载失败时，网页仍然具有良好的可读性。
