### CSS `@font-face` 的 `format()` 使用方法与语法详解 在 CSS 中，`@font-face` 是一种用于定义自定义字体的规则，允许开发者将网页中使用的字体文件嵌入到网站中。为了确保字体文件能够在不同浏览器中正常加载和使用，`format()` 函数被用来指定字体文件的格式类型。 #### 基本语法结构 ```css @font-face { font-family: 'MyCustomFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.eot') format('embedded-opentype'), url('myfont.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; } ``` - **`font-family`**：定义字体的名称，供后续 CSS 规则引用。 - **`src`**：指定字体文件的路径及其格式。可以列出多个字体来源，浏览器会根据支持情况选择第一个可用的格式。 - **`format()`**：用于明确指出字体文件的格式类型，帮助浏览器决定是否加载该字体[^1]。 #### 支持的字体格式及说明 1. **EOT (Embedded OpenType)** - 由微软开发，主要用于 Internet Explorer 浏览器。 - 文件扩展名通常为 `.eot`。 - 示例： ```css url('myfont.eot') format('embedded-opentype') ``` 2. **TTF (TrueType Font)** - 广泛支持的字体格式，适用于大多数现代浏览器。 - 文件扩展名通常为 `.ttf`。 - 示例： ```css url('myfont.ttf') format('truetype') ``` 3. **WOFF (Web Open Font Format)** - 专为网页设计优化的字体格式，压缩率高且兼容性好。 - 文件扩展名通常为 `.woff`。 - 示例： ```css url('myfont.woff') format('woff') ``` 4. **WOFF2** - WOFF 的改进版本，提供更高的压缩效率。 - 文件扩展名通常为 `.woff2`。 - 示例： ```css url('myfont.woff2') format('woff2') ``` 5. **SVG (Scalable Vector Graphics Font)** - 主要用于旧版 iOS 设备（如 iPhone 和 iPad）。 - 文件扩展名通常为 `.svg`。 - 注意：由于安全性和性能问题，现代浏览器已逐步弃用 SVG 字体格式[^1]。 - 示例： ```css url('myfont.svg#svgFontName') format('svg') ``` #### 最佳实践建议 - **优先使用 WOFF2**：它是目前最高效的字体格式，具有良好的压缩率和广泛的浏览器支持。 - **回退机制**：为不同浏览器提供多种字体格式，以确保最大兼容性。 - **性能优化**：尽量减少不必要的字体变体（如粗体、斜体等），并使用子集化（subset）技术来减小字体文件大小。 - **跨域字体请求**：如果字体文件来自不同的域名，确保服务器配置了正确的 CORS（跨域资源共享）策略。 #### 示例：完整的 `@font-face` 定义 ```css @font-face { font-family: 'Open Sans'; src: url('opensans.eot'); src: url('opensans.eot?#iefix') format('embedded-opentype'), url('opensans.woff2') format('woff2'), url('opensans.woff') format('woff'), url('opensans.ttf') format('truetype'), url('opensans.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } ``` 此示例展示了如何为不同浏览器提供多种字体格式，并确保兼容性。 --- ###