CSS @font-face：正确加载和应用自定义字体的教程-html教程-PHP中文网

CSS @font-face：正确加载和应用自定义字体的教程

心靈之曲

发布： 2025-09-01 17:57:00

原创

922人浏览过

CSS @font-face：正确加载和应用自定义字体的教程

本教程旨在详细指导如何正确使用CSS的@font-face规则导入和应用自定义字体，解决字体加载失败或回退到备用字体的问题。我们将深入探讨@font-face的语法、关键属性及其在HTML元素中的应用，并提供实用的代码示例和注意事项，确保您能成功在网页中呈现个性化字体。

@font-face规则简介

在网页设计中，为了实现独特的视觉风格，我们经常需要使用非系统默认的自定义字体。css的@font-face规则正是为此而生，它允许开发者在网页中加载并应用服务器上的字体文件，从而摆脱“网页安全字体”的限制，为用户提供更丰富的视觉体验。通过@font-face，您可以将下载的字体文件（如.woff, .ttf, .otf等）作为本地字体在网页上使用，就像使用times new roman或arial一样。

核心语法与属性

要成功使用@font-face，您需要定义字体的名称并指定其源文件路径。以下是其基本结构和关键属性：

font-family属性 此属性用于为您的自定义字体指定一个唯一的名称。这个名称将在后续的CSS样式中被引用，以将字体应用到HTML元素上。建议使用有意义且不与现有字体冲突的名称。
src属性 此属性是@font-face规则的核心，它指定了字体文件的位置。src属性可以接受一个或多个url()函数，每个函数指向一个字体文件。为了提高浏览器兼容性，通常会提供多种格式的字体文件。
- url()函数：指向字体文件的路径，可以是相对路径或绝对路径。
- format()函数（可选但推荐）：用于提示浏览器字体文件的格式，例如format('woff2')、format('woff')、format('truetype')等。这有助于浏览器选择最适合的字体格式进行加载，并跳过不支持的格式。

基本语法示例：

@font-face {
  font-family: 'MyCustomFont'; /* 为字体定义一个名称 */
  src: url('path/to/fonts/MyCustomFont.woff2') format('woff2'), /* WOFF2格式，现代浏览器首选 */
       url('path/to/fonts/MyCustomFont.woff') format('woff'),   /* WOFF格式，广泛支持 */
       url('path/to/fonts/MyCustomFont.ttf') format('truetype'); /* TTF格式，兼容性好 */
  /* 还可以添加其他属性，如 font-weight, font-style, font-display 等 */
}

登录后复制

如何应用自定义字体

一旦您使用@font-face规则定义了自定义字体，就可以像使用任何其他字体一样，通过font-family属性将其应用到HTML元素上。只需在您希望应用字体的CSS选择器中，将font-family的值设置为您在@font-face中定义的字体名称即可。

示例代码：

立即学习“前端免费学习笔记（深入）”；

假设您的自定义字体文件名为 sansation_light.woff，并存放在与CSS文件同级的 fonts 文件夹中。

CSS (style.css) 文件：

Hugging Face

Hugging Face AI开源社区

查看详情

/* 定义自定义字体 */
@font-face {
  font-family: 'MyFirstFont'; /* 为字体定义名称 */
  src: url('fonts/sansation_light.woff') format('woff'); /* 指定字体文件路径和格式 */
  /* 可以根据需要添加更多字体格式以提高兼容性 */
}

/* 将自定义字体应用到HTML元素 */
div {
  font-family: 'MyFirstFont', Cursive, sans-serif; /* 优先使用自定义字体，然后是备用字体 */
}

p {
  font-family: 'MyFirstFont', Arial, sans-serif;
}

登录后复制

HTML (index.html) 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义字体示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        这是一个使用自定义字体“MyFirstFont”的文本段落。
    </div>
    <p>
        这是另一个应用了自定义字体的段落。
    </p>
</body>
</html>

登录后复制

在上述示例中，div 和 p 元素中的文本将尝试使用名为 MyFirstFont 的自定义字体。如果该字体加载失败，浏览器将依次尝试使用 Cursive 或 Arial，最后是通用的 sans-serif 字体。

常见问题与最佳实践

在使用@font-face时，可能会遇到一些问题，例如字体无法加载或回退到备用字体。以下是一些常见问题及其解决方案和最佳实践：

字体文件路径检查 这是最常见的问题。请务必仔细检查src属性中url()函数内的字体文件路径是否正确。
- 相对路径： 路径是相对于CSS文件而言的。例如，如果CSS文件在根目录，字体文件在fonts/目录，则路径应为url('fonts/yourfont.woff')。
- 绝对路径： 从网站根目录开始的路径（例如/fonts/yourfont.woff）或完整的URL（例如https://example.com/fonts/yourfont.woff）。
- 大小写敏感： 在某些服务器（如Linux）上，文件路径和名称是大小写敏感的。
字体格式与浏览器兼容性 不同的浏览器支持不同的字体格式。为了确保最佳兼容性，建议提供多种字体格式：
- .woff2：最新的格式，压缩率高，现代浏览器首选。
- .woff：广泛支持，压缩率良好。
- .ttf (truetype) / .otf (opentype)：旧版浏览器和某些移动设备支持。
- .eot (embedded-opentype)：IE9及更早版本浏览器特有。通过在src属性中按优先顺序（通常是WOFF2 -> WOFF -> TTF/OTF）列出多个url()，浏览器会选择它支持的第一个格式加载。
font-family回退机制 即使您使用了自定义字体，也强烈建议在font-family属性中提供一个或多个“网页安全字体”作为备用。这可以确保在自定义字体加载失败或浏览器不支持时，文本仍然能够以可读的方式显示，避免出现空白或乱码。
font-display属性 这是一个重要的CSS属性，用于控制字体在加载过程中的显示方式。
- auto：默认值，由浏览器决定。
- block：字体完全加载前，文本不显示（隐藏）。
- swap：字体完全加载前，使用备用字体显示文本，加载完成后替换。
- fallback：与swap类似，但有一个很短的阻塞期，然后使用备用字体。
- optional：浏览器可以决定是否加载字体，如果网络条件不佳可能不加载。通常推荐使用swap或fallback以改善用户体验，避免“不可见文本闪烁”（FOIT）。
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/fonts/MyCustomFont.woff2') format('woff2');
  font-display: swap; /* 推荐，先显示备用字体，加载完成后再替换 */
}
```
登录后复制
跨域问题 (CORS) 如果您的字体文件托管在与网站不同的域名下，可能会遇到跨域资源共享（CORS）问题，导致字体无法加载。您需要在字体文件所在的服务器上配置CORS头，允许您的网站访问这些资源。
性能考量 自定义字体文件通常较大，会增加网页的加载时间。
- 字体子集化 (Subsetting)： 仅包含您网页中实际使用的字符，可以显著减小字体文件大小。
- 压缩： 确保您的服务器正确配置，对字体文件进行Gzip或Brotli压缩。
- 缓存： 配置服务器缓存策略，使字体文件能够被浏览器缓存，减少重复下载。

总结

@font-face规则是实现网页个性化字体设计的强大工具。通过正确理解其核心语法、精确指定字体文件路径和格式，并结合最佳实践（如多格式兼容、font-display优化和备用字体设置），您可以有效地在网页中加载和应用自定义字体。当遇到字体加载问题时，请优先检查字体文件路径和文件格式，并考虑浏览器缓存和服务器配置。遵循本教程的指导，您将能够成功地为您的网站增添独特的字体魅力。

以上就是CSS @font-face：正确加载和应用自定义字体的教程的详细内容，更多请关注php中文网其它相关文章！