Android 4.0.x上的font-face无法正常工作。

Question

Android 4.0.x上的font-face无法正常工作。

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");
}

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

在Google Nexus上，它可以在移动Chrome和PhoneGap上使用。但是在Motorola Razr上，只能在移动Chrome上使用。无论是原生的Android浏览器还是Phonegap都不使用MyFont字体。

是否有任何解决方法来使得我的字体在Android 4.0.x上能够工作？

- take

我有一个类似的问题。我有一部安装了CM10的三星Galaxy SII Skyrocket手机。在4.0.x版本中，操作系统浏览器可以正常显示@font-face。然而，今天发布了4.2.1版本，当我更新后，@font-face就无法加载了。 - gavsiu

在三星Galaxy Nexus上，使用Android 4.2.1 Jelly Beans的股票浏览器和使用Webview的PhoneGap（）存在相同的问题。请注意，Chrome应用程序没有此问题。这非常令人恼火，因为默认的Android字体不包含某些字形并显示为空白！ - ceyquem

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jlovison · Accepted Answer

有趣，我的经历正好相反。

我有一台运行4.2.1（CM 10.1）的Galaxy Nexus手机，在升级前加载字体非常正常，但在更新后使用本地 WebKit（而不是 Chrome，Chrome仍然正常工作）时，CSS变得异常。

我意识到这不是字体问题，而是 CSS 的特异性出现了问题（基于Bootstrap，然后用自己的 CSS 替换）。即使是内联样式也不会显示，如果移除 Bootstrap，则一切正常。非常奇怪。

至于你跟我遇到的问题相反，有几个想法：

为什么首选项中有一个 .woff？我见过为 IE 向后兼容模式使用 .eot，但使用 .woff 的浏览器应该能够从第二个 src 中使用它。可以尝试移除第一个 src 吗？（这不应该是问题，因为WebKit应该用第二个src来覆盖第一个src）
你是如何加载字体文件的？从本地存储还是从 web 服务器？我知道在 Firefox 中，如果字体文件所在的服务器与类型文件不同，那么没有 Allow Origin 头就无法加载。
你需要在其他非 WebKit 浏览器中加载相同的字体定义吗？如果不需要，请考虑删除除 .woff 之外的所有文件。
你确定问题出在字体定位符上吗？尝试将字体声明设置为非默认系统字体（如 'serif'）。查看是否应用了字体声明，或者是你的 font-face 没有问题，但 CSS 在某些方面没有将字体应用于类型？（我上个星期就是这种情况）

没有额外的信息很难知道原因。除了首选项中有一个 .woff 的奇怪之处外，您的 @font-face 声明似乎应该正常工作。我猜问题不在于该代码片段，而是其他地方出现了问题。

编辑：

我追踪了我的问题 - 在Android 4.2.1上，CSS选项text-rendering:的行为与Chrome和之前的Android版本相比有很大不同。如果您正在使用此选项，请尝试更改或删除它，以查看是否可以解决您的问题。这是我所见过的Android 4.0与Android 4.2 webkit在渲染字体方面唯一不同的事情。