11

我正在用 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 7Android 4.2.1和Android 4.0.4。Motorola Razr

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

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

4

1 回答 1

10

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

我有一个运行 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 渲染字体的方式有所不同。

于 2012-12-23T09:11:57.607 回答