CSS 的 @font-face 声明

在 CSS 的 @font-face 声明中，format() 用于指定所加载字体文件的格式。这有助于浏览器识别字体的类型，并决定是否支持加载该字体。

常见字体格式及解释

1. woff2 (Web Open Font Format 2)

   • 含义：这是最新的字体格式，专为网页优化。
   • 优点：相比woff压缩率更高，文件更小，加载更快。
   • 支持：现代浏览器（如 Chrome、Firefox、Edge、Safari）。

2. woff (Web Open Font Format)

   • 含义：早期的网页字体格式，提供良好的兼容性。
   • 优点：具有较好的压缩率，支持大多数浏览器。
   • 支持：包括较老版本的浏览器。

3. truetype 或 ttf (TrueType Font)

   • 含义：一种常见的字体格式，广泛应用于 Windows 和 macOS。
   • 优点：兼容性好，开发者容易获取。
   • 支持：大多数浏览器，但加载速度相对较慢。

4. opentype 或 otf (OpenType Font)

   • 含义：TrueType 的扩展版本，支持更多字符和排版功能。
   • 优点：适合高质量排版，功能强大。
   • 支持：大多数浏览器。

5. svg

   • 含义：一种基于 SVG 图形的字体格式。
   • 优点：主要用于早期的 iOS 浏览器。
   • 支持：不建议使用，新版浏览器已逐渐不支持。

6. embedded-opentype 或 eot

   • 含义：IE 专用的字体格式。
   • 优点：早期兼容性强，但已被淘汰。
   • 支持：仅 IE8 或更早版本。

format() 的作用

• 浏览器根据文件后缀和 format() 的声明判断是否支持该字体。
• 如果未指定 format()，浏览器会尝试加载，但有些情况下可能失败。

示例：多种字体格式回退

通常，开发者会提供多个格式的字体文件以确保兼容性：

@font-face {
    font-family: 'MasaFont';
    src: url('./assets/fonts/MasaFont-Bold.woff2') format('woff2'),
         url('./assets/fonts/MasaFont-Bold.woff') format('woff'),
         url('./assets/fonts/MasaFont-Bold.ttf') format('truetype');
}

浏览器行为

• 浏览器会按顺序尝试加载字体文件，直到找到支持的格式为止。
• 推荐优先使用woff2，然后备选woff，以提供最佳性能和兼容性。