android - font-face 在 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");
}

我的两个测试设备是 Google Nexus 7 和 Android 4.2.1 和 Motorola Razr Android 4.0.4 .

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

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

Answer 1

很有趣。我有相反的经历。

我有一个运行 4.2.1 (CM 10.1) 的 Galaxy Nexus，它在升级之前加载字体非常好，但是自从更新后 CSS 开始变得非常奇怪(仅在 native WebKit 中，而不是 Chrome，它仍然有效)。

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

至于你对我问题的反驳，有几点想法:

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

• 您如何加载字体文件？从本地存储？从网络服务器？我知道在 Firefox 中，如果带有字体文件的服务器与带有类型的文件不同，则在没有 Allow Origin header 的情况下它不会加载。

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

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

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

编辑:

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