android 4.0.x 上的字体不起作用

Question

我正在使用 JQM 构建一个移动应用程序，我需要使用 font-face 声明自己的字体。

我将字体 css 文件 fonts.css 作为第一个加载的 css 文件包含在我的 index.html 中，并像这样声明 font-faces：

@font-face {
    font-family:"MyFont";
    font-weight:normal;
    font-style:normal;
    src:url("fonts/MyFont.woff");
    src:url("fonts/MyFont.eot?") format("eot"),
        url("fonts/MyFont.woff") format("woff"),
        url("fonts/MyFont.ttf") format("truetype"),
        url("fonts/MyFont.svg#MyFont") format("svg");
}

我的两台测试设备是带有 Android 4.2.1 的 Google Nexus 7 和带有 Android 4.0.4 的 Motorola Razr。

在 Google Nexus 上，它既适用于移动版 Chrome，也适用于 PhoneGap。但在摩托罗拉 Razr 上，它仅适用于移动 Chrome。现有的 Android 浏览器和 Phonegap 都不使用 MyFont。

是否有任何解决方法可以让我的字体在 Android 4.0.x 上运行？

Answer 1

有趣。我有相反的经历。

我有一个运行 4.2.1 (CM 10.1) 的 Galaxy Nexus，在升级之前加载字体绝对正常，但自更新以来 CSS 开始变得非常奇怪（仅在本机 WebKit 中，而不是 Chrome，它仍然有效）。

我意识到这不是字体问题，而是 CSS 的特殊性被搞砸了（使用引导程序作为基础，然后用我自己的 CSS 替换）。如果包含引导程序，即使内联样式也不会显示，如果删除引导程序，一切都会正常工作。很奇怪。

至于你对我的问题的反面，有几个想法：

• 为什么第一个 src 带有 .woff？我已经看到它带有 .eot 用于 IE 向后兼容模式，但是使用 .woff 的浏览器应该能够从第二个 src 使用它。也许尝试删除第一个 src？ （这应该不是问题，因为 WebKit 应该用第二个 src 覆盖）

• 如何加载字体文件？从本地存储？从网络服务器？我知道使用 Firefox 如果具有字体文件的服务器与具有该类型的文件不同，它不会在没有 Allow Origin 标头的情况下加载。

• 您是否需要在其他非 webkit 浏览器中加载相同的字体定义？如果没有，请考虑删除除 .woff 之外的所有文件。

• 您确定是字体问题吗？尝试将字体声明设置为非默认系统字体（例如“衬线”）。查看是否正在应用字体声明，还是您的字体很好，但 css 不知何故没有将字体应用于类型？ （就像我上周的情况一样）

如果没有其他信息，这有点难以知道。您的@font-face 声明，除了第一个 src 是 .woff 的怪异之外，似乎它应该可以正常工作。我的猜测是问题出在其他地方，而不是那个代码片段。

编辑：

我找到了我的问题 --- 在 Android 4.2.1 上，CSS 选项 text-rendering: 的行为与 Chrome 和以前的 Android 版本完全不同。如果您正在使用此选项，请查看更改或删除它是否可以为您解决问题。这是我唯一能想到的，我认为 Android 4.0 与 Android 4.2 webkit 在渲染字体方面的不同之处。