在Android 4.0.x的字体面不工作 [英] font-face on android 4.0.x doesn't work
问题描述
我在建设有JQM移动应用程序，我需要声明自己的字体，字体面。
I'm building a mobile Application with JQM and I need to declare own Fonts with font-face.
我包括字体的 CSS 文件 fonts.css 在我的index.html的第一次加载CSS文件，并宣布字体面孔是这样的：
I'm including the font css file fonts.css as the first loaded css file in my index.html and declared the font-faces like this:
@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");
}
我的两个测试设备的谷歌Nexus 7 是的Android 4.2.1 和摩托罗拉RAZR 是的Android 4.0.4
在谷歌Nexus，它的作品无论在移动Chrome浏览器，并与PhoneGap的。但在摩托罗拉的Razr，它仅适用于移动浏览器。无论是股票Android浏览器和PhoneGap的不使用 MyFont 。
On Google Nexus, it works both on mobile Chrome and with PhoneGap. But on the Motorola Razr, it works only with mobile Chrome. Both the stock Android Browser and Phonegap don't use MyFont.
有没有什么解决方法以获得在Android 4.0.x的在我的字体的工作？
Is there any Workaround to get the my Font work on Android 4.0.x?
推荐答案
有趣。我有相反的经验。
Interesting. I'm having the reverse experience.
我有一个Galaxy Nexus的运行4.2.1（10.1厘米），这是加载字体精绝，直至升级，但已经开始变得非常古怪的CSS因为更新（仅在本机的WebKit，而不是浏览器，这仍然有效）。
I have a Galaxy Nexus running 4.2.1 (CM 10.1), that was loading fonts absolutely fine until the upgrade, but has started getting really weird with the CSS since the update (only in the native WebKit, not Chrome, which still works).
我意识到这是不是字体面的问题，但CSS的特异性是越来越搞砸了（使用引导作为基础，然后用我自己的CSS取代）。即使内嵌样式显示不出来，如果引导包括在内，一切工作正常，如果引导删除。很奇怪。
I realized it was not the font-face issue, but that the CSS specificity is getting screwed up (using bootstrap as a base, and then replacing with my own CSS). Even inline styles don't show up if bootstrap included, everything works fine if bootstrap removed. Very strange.
至于你我的问题的反向，一对夫妇的想法：
As for your reverse of my issue, a couple of thoughts:
-
为什么第一个SRC与.woff？我已经看到了一个.eot IE浏览器向后兼容模式，但使用的浏览器.woff应该能够从第二SRC使用它。也许尝试除去第一SRC？ （这不应该成为问题，因为WebKit的应与第二SRC覆盖）
Why the first src with a .woff? I've seen it with a .eot for IE backwards compatibility mode, but browsers using .woff should be able to use it from the second src. Maybe try removing the first src? (This shouldn't be the issue, as WebKit should overwrite with second src)
你是如何加载的字体文件？从本地存储？从Web服务器？我知道用Firefox，如果服务器的字体文件是从与类型的文件不同，它不会加载没有允许产地头。
How are you loading the font files? From local storage? From a web server? I know with Firefox if the server with the font files is different from the files with the type, it won't load without an Allow Origin header.
你需要加载其他非WebKit的浏览器同样的字体定义？如果没有，考虑取消除.woff的所有文件。
Do you need to load this same font definition in other non-webkit browsers? If not, consider removing all the files except the .woff.
您确定问题是字体面？尝试字体声明设置为一个非默认的系统字体（如衬线）。看看字体声明被应用，或者会不会是你的字体面是好的，但CSS是有点不适用的字体类型？ （由于一直是我的情况下，在过去的一周）
Are you sure the issue is the font-face? Try setting the font declaration to a non-default system font (such as 'serif'). See if the font declaration is being applied, or could it be that your font-face is fine, but the css is somehow not applying the font to the type? (As has been my case this past week)
这是一个有点很难知道没有其他信息。您的@ font-face声明，比第一SRC是一个.woff古怪等，好像它应该工作的罚款。我的猜测是问题出在其它地方，不与code片段。
It's a bit hard to know without additional information. Your @font-face declaration, other than the weirdness of the first src being a .woff, seems like it should work fine. My guess is the issue lies elsewhere, not with that code fragment.
编辑：
我找到了我的问题---在Android 4.2.1 CSS选择文本渲染：从Chrome和previous的Android版本的表现完全不同。如果你正使用该选项，查看是否更改或删除其修复该问题为您服务。这是我见过的作为是如何的Android 4.0和Android手机，4.2的WebKit已经被渲染字体不同的是我唯一能想到的。
I tracked down my issue --- on Android 4.2.1 the CSS option text-rendering: was behaving quite differently from Chrome and previous Android versions. If you are using this option, see if changing or removing it fixes the issue for you. It's the only thing I can think of that I've seen as being different in how Android 4.0 vs Android 4.2 webkit has been rendering fonts.
这篇关于在Android 4.0.x的字体面不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
