本文深入探讨了自定义网页字体（@font-face）在移动设备上无法正常显示的问题，并指出主要原因在于字体格式的兼容性。我们将详细介绍如何优化@font-face声明，优先使用更广泛支持的字体格式如woff2、woff和ttf，以确保您的网页字体在所有现代浏览器和移动设备上都能稳定呈现，从而显著提升用户体验。
理解@font-face与字体格式
@font-face 是CSS3中一项强大的规则，它允许网页开发者在网站中使用自定义字体，而无需依赖用户设备上预装的字体。通过引入自定义字体，设计师可以实现更丰富的视觉效果和品牌一致性。然而，不同浏览器和设备对字体格式的支持程度不一，这使得确保字体在所有平台上都能正常显示成为一项挑战。
常见的网页字体格式包括：
- EOT (Embedded OpenType)：微软IE浏览器独有的格式，主要用于IE6-IE9。
- WOFF (Web Open Font Format)：由Mozilla开发，得到广泛支持，是目前推荐的网页字体格式之一。
- WOFF2 (Web Open Font Format 2.0)：WOFF的下一代，提供更好的压缩率，文件更小，加载更快，是目前最推荐的网页字体格式。
- TTF (TrueType Font)：一种广泛使用的字体格式，被Windows和macOS系统原生支持，在网页端也具有较好的兼容性，尤其是在移动设备上。
- SVG (Scalable Vector Graphics Font)：早期iOS Safari支持的字体格式，现在已较少使用。
移动设备字体显示异常的根源
许多开发者在使用@font-face时，可能会遇到自定义字体在桌面浏览器上显示正常，但在移动设备上却无法加载的问题。这通常不是因为@font-face本身有缺陷，而是由于字体格式的优先级和兼容性配置不当。
以以下常见的@font-face声明为例：
@font-face {
font-family: 'gilroy-regular';
src: url('../fonts/gilroy-regular-webfont.eot'); /* IE Only */
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属性首先声明了.eot格式。虽然第二个src属性包含了多种格式，但浏览器在解析时会按照顺序查找它能识别并支持的第一个格式。对于大多数现代浏览器（包括移动浏览器），.eot格式是过时且不支持的。如果浏览器在解析到url('../fonts/gilroy-regular-webfont.eot')时遇到问题，或者错误地将其视为主要来源，那么后续更兼容的格式可能就无法被正确加载。
核心问题在于：
- .eot格式主要为旧版IE设计，现代浏览器和移动设备普遍不支持。
- 声明顺序不当，将兼容性差的格式置于优先位置，可能导致兼容性好的格式无法被解析或加载。
优化@font-face声明以增强兼容性
为了确保自定义字体在所有设备（包括移动设备）上都能稳定显示，我们需要采用一种“子弹头”（Bulletproof）的@font-face语法，并优先加载现代且兼容性更好的字体格式。
推荐的@font-face声明顺序和最佳实践：
- WOFF2 (Web Open Font Format 2.0)：提供最佳的压缩和性能，应优先加载。
- WOFF (Web Open Font Format)：广泛支持，是现代浏览器的首选。
- TTF (TrueType Font)：兼容性良好，尤其在移动设备上表现稳定。
- SVG (Scalable Vector Graphics Font)：作为旧版iOS的备用。
- EOT (Embedded OpenType)：仅作为旧版IE的最后备用。
以下是优化后的@font-face声明示例：
@font-face {
font-family: 'gilroy-regular';
src: url('../fonts/gilroy-regular-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/gilroy-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/gilroy-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/gilroy-regular-webfont.woff') format('woff'), /* Modern Browsers */
url('../fonts/gilroy-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/gilroy-regular-webfont.svg#gilroy-regular') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
font-display: swap; /* 推荐：优化字体加载的用户体验 */
}关键改进点：
- font-display: swap;: 这是一个非常重要的CSS属性，它告诉浏览器如何处理字体加载。swap值表示浏览器应立即使用系统字体渲染文本，一旦自定义字体加载完成，就替换掉系统字体。这能有效避免文本在字体加载期间不可见的“闪烁无样式文本”（FOIT）问题，提升用户体验。
- 顺序优化: 将WOFF2和WOFF放在TTF之前，确保现代浏览器优先加载更高效的格式。TTF紧随其后，以确保在移动设备上的广泛兼容性。EOT则放在最后，仅供旧版IE使用。
- ?#iefix技巧: 第一个src声明是为了兼容IE9，第二个带有?#iefix的src是为了兼容IE6-IE8，这是一个针对IE浏览器的特定hack。
注意事项与额外排查
即使使用了优化的@font-face声明，有时仍可能遇到问题。请检查以下几点：
- 字体文件路径: 确保url()中指定的字体文件路径是绝对正确且可访问的。相对路径容易出错，建议使用开发者工具检查网络请求是否成功加载了字体文件。
- 服务器MIME类型: 确保您的Web服务器为不同字体格式配置了正确的MIME类型。例如：
- CORS (跨域资源共享): 如果字体文件托管在与您的网站不同的域上（例如，CDN），您可能需要在服务器上配置CORS头，允许您的网站访问这些字体资源。否则，浏览器出于安全考虑会阻止加载。
- 字体生成工具: 建议使用专业的字体生成工具，如 Font Squirrel's Webfont Generator，它可以根据您上传的字体文件自动生成所有必要的格式和优化的@font-face代码。
- 浏览器开发者工具: 利用浏览器的开发者工具（通常按F12打开），检查“网络”选项卡，查看字体文件的加载状态和响应头。在“控制台”中查找任何与字体加载相关的错误信息。
总结
确保自定义字体在所有设备上（尤其是移动设备）正常显示，关键在于理解不同字体格式的兼容性，并采用优化的@font-face声明顺序。优先使用WOFF2、WOFF和TTF等现代且兼容性强的格式，结合font-display: swap;以提升用户体验，并仔细检查文件路径、服务器MIME类型和CORS配置。通过这些措施，您可以显著提高自定义字体在各种环境下的稳定性和一致性。
