问题 android 4.0.x上的font-face不起作用


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

我包括字体 CSS 文件 fonts.css 作为我的index.html中第一个加载的css文件并声明了 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 和a Motorola Razr 同 Android 4.0.4

在谷歌Nexus上,它适用于移动Chrome和PhoneGap。但在摩托罗拉Razr上,它仅适用于移动Chrome。 Android浏览器和Phonegap都没有使用 MyFont

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


8198
2017-12-21 12:42


起源

我有一个类似的问题。我有一个三星Galaxy SII Skyrocket与CM10。在4.0.x上,OS浏览器正在显示 @font-face精细。但是,4.2.1今天发布,当我更新它时, @font-face 不再加载。 - gavsiu
使用Android 4.2.1 Jelly Beans的三星Galaxy Nexus上的股票浏览器和phonegap(使用webview)也存在同样的问题。请注意,Chrome应用不存在问题。这非常烦人,因为默认的Android字体不包含一些字形和显示空白! - ceyquem


答案:


有趣。我有相反的经历。

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

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

至于你的问题的反面,有几个想法:

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

  • 你是如何加载字体文件的?从本地存储?从Web服务器?我知道在Firefox中,如果带有字体文件的服务器与具有该类型的文件不同,则不会在没有Allow Origin标头的情况下加载。

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

  • 你确定问题是font-face吗?尝试将字体声明设置为非默认系统字体(例如“serif”)。看看是否正在应用字体声明,或者可能是你的font-face没问题,但是css在某种程度上没有将字体应用于该类型? (就像过去一周的情况一样)

没有其他信息,有点难以理解。你的@ font-face声明,除了第一个src的怪异是.woff之外,似乎应该可以正常工作。我的猜测是问题在于其他地方,而不是代码片段。

编辑: 

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


10
2017-12-23 09:11



Why the first src with a .woff? 我将fonts.css从我们的网站复制,其他人将其构建到移动应用程序目录。但你是对的,使用eot文件,因为第一个src会更好。 How are you loading the font files? 对于测试,字体文件存储在Web服务器上,应用程序通过Web浏览器使用。使用phonegap构建字体存储在设备下 /assets/styles/fonts/  - 我只需要在该App上加载字体。 - 我将style.css中的font-family更改为'Verdana',字体正在改变。 - 文字渲染无处使用。 - take
不仅如此 text-rendering 也需要关闭 -webkit-font-smoothing - gavsiu
text-rendering 经过五个小时的轰炸,我没有措辞。谢谢 - homerjam
text-rendering: auto 解决了我的问题。感谢您发布此编辑。大量的时间浪费在试图解决这个问题。 - morrisbret
我正在测试一个网站而不是一个phonegap应用程序来追踪问题,即使在停用后也是如此 text-rendering 和 -webkit-font-smoothing 我仍然面临这个问题(Galaxy Nexus,Android 4.2.1 Jelly Beans with stock browser)。 - ceyquem