我正在使用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上运行?
有趣。我有相反的经历。
我有一个运行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的渲染方式有所不同。