解决移动设备上@font-face自定义字体不显示问题

admin 百科 2025-12-12 13

本文旨在解决使用`@font-face`规则引入自定义字体在移动设备上无法显示的问题。核心原因通常是`src`属性中字体格式的声明顺序不当，尤其是将仅支持旧版ie的`eot`格式置于优先位置。教程将详细解释不同字体格式的兼容性，并提供优化后的`@font-face`声明范例，确保自定义字体能在各类现代浏览器和移动设备上正确渲染。

理解@font-face与字体格式兼容性

@font-face CSS规则允许网页开发者在网站中使用自定义字体，而无需依赖用户设备上预装的字体。通过指定字体文件的路径和格式，浏览器可以下载并渲染这些字体。然而，不同浏览器和操作系统对字体格式的支持程度各异，这使得@font-face的配置变得复杂。

常见的字体格式包括：

WOFF2 (Web Open Font Format 2.0)：最新的Web字体格式，提供最佳的压缩比和性能，现代浏览器广泛支持。
WOFF (Web Open Font Format)：WOFF2的前身，压缩效率良好，被大多数现代浏览器支持。
TTF (TrueType Font)：一种广泛使用的字体格式，兼容性极佳，尤其在移动设备和旧版浏览器中表现良好。
EOT (Embedded OpenType)：微软为IE浏览器开发，主要用于IE6-IE11，现代浏览器和移动设备基本不支持。
SVG (Scalable Vector Graphics Font)：用于旧版iOS浏览器，但通常不推荐作为首选，因其文件较大且兼容性问题较多。

移动设备字体不显示的核心问题

当自定义字体在桌面浏览器上正常显示，但在所有移动设备上却无法加载时，一个常见且容易被忽视的原因是@font-face规则中src属性的声明顺序问题。许多开发者在生成@font-face代码时，可能会沿用一些旧的或不优化的模板，将eot格式作为主要的src来源，或者将其置于其他更广泛支持的格式之前。

例如，以下是一个可能导致移动设备显示问题的@font-face声明：

@font-face {
    font-family: 'gilroy-regular';
    src: url('../fonts/gilroy-regular-webfont.eot'); /* 这里将EOT作为主src */
    src: url('../fonts/gilroy-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-regular-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-regular-webfont.woff') format('woff'),
         url('../fonts/gilroy-regular-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-regular-webfont.svg#gilroy-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

登录后复制

在这个例子中，第一行src: url('../fonts/gilroy-regular-webfont.eot');会指示某些浏览器首先尝试加载EOT文件。由于EOT格式主要用于旧版IE，现代移动浏览器无法识别或支持这种格式，导致它们无法正确加载字体，从而回退到系统默认字体。

解决移动设备上@font-face自定义字体不显示问题-第2张图片-佛山资讯网