如何使用 CSS 的 @font-face 规则自定义字体？

推荐答案

使用 CSS 的 @font-face 规则可以自定义字体。你需要提供字体文件的路径，并指定字体名称，然后在 CSS 中使用该字体名称。

// www.javascriptcn.com code example
@font-face {
  font-family: 'MyCustomFont'; /* 自定义字体名称 */
  src: url('path/to/my-custom-font.woff2') format('woff2'), /* 推荐使用 woff2 */
       url('path/to/my-custom-font.woff') format('woff'),  /* 兼容性考虑 */
       url('path/to/my-custom-font.ttf') format('truetype'); /* 兼容性考虑 */
  font-weight: normal; /* 可选，设置字体粗细 */
  font-style: normal;  /* 可选，设置字体样式 */
}

/* 在 CSS 中使用自定义字体 */
body {
  font-family: 'MyCustomFont', sans-serif; /*  'MyCustomFont'优先，后备字体 'sans-serif' */
}

本题详细解读

@font-face 规则是 CSS 中用于引入自定义字体的关键方法，它允许开发者使用不在用户操作系统中预装的字体。其核心在于定义一个字体族（font family）及其相关的字体资源。

关键属性

• font-family: 定义你自定义字体的名称，这个名称将在 CSS 样式中被引用。例如 'MyCustomFont'。

• src: 指定字体文件的来源。可以使用 url() 函数来引入字体文件，支持多种格式。

  • url('path/to/font.woff2'): woff2 格式是目前推荐的字体格式，压缩率高，加载速度快。
  • url('path/to/font.woff'): woff 格式是较旧的压缩字体格式，用于兼容不支持 woff2 的浏览器。
  • url('path/to/font.ttf'): ttf (TrueType Font) 格式是比较常见的字体格式，兼容性好。
  • format('woff2'), format('woff'), format('truetype'): format() 用来指示字体文件的格式，浏览器会根据 format() 信息选择它支持的字体格式进行加载。

• font-weight (可选): 设置字体的粗细，例如 normal (正常), bold (加粗), 100-900 等数值。

• font-style (可选): 设置字体的样式，例如 normal (正常), italic (斜体), oblique (倾斜)。

使用方法

1. @font-face 定义: 首先，使用 @font-face 规则定义自定义字体。需要提供字体文件路径，自定义字体名称，以及可选的 font-weight 和 font-style。

2. CSS 中应用: 在 CSS 样式中，使用 font-family 属性指定自定义字体。为了兼容性，通常会提供一个后备字体，例如 sans-serif 或 serif。如果用户的浏览器无法加载自定义字体，则会使用后备字体。

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

最佳实践

• 使用多种字体格式: 提供 woff2, woff, 和 ttf 等多种字体格式可以保证在不同浏览器上的兼容性。woff2 是现代浏览器推荐的格式，具有最佳的压缩率。

• 优化字体文件: 尽量压缩字体文件，可以减少加载时间，提升网站性能。

• 考虑字体加载策略: 使用 font-display 属性可以控制字体加载的行为，例如 swap (先显示后备字体，在字体加载完成后切换到自定义字体)。

• 字体许可: 使用字体需要注意其版权许可，确保使用符合许可条款的字体。