CSS @font-face 声明在 Android 4.3 Internet 浏览器中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20890489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face declarations don't work in Android 4.3 Internet browser?
提问by David
My Samsung Galaxy S3 phone recently upgraded from Android 4.1.3 to Android 4.3. Now several websites I designed which I tested in the Android internet browser are not displaying fonts I have declared with @font-face. What do I need to do to fix this?
我的三星 Galaxy S3 手机最近从 Android 4.1.3 升级到了 Android 4.3。现在，我在 Android 互联网浏览器中测试的几个我设计的网站没有显示我用@font-face. 我需要做什么来解决这个问题？
One of the sites (development version): http://beta.kdfansite.com
站点之一（开发版）：http: //beta.kdfansite.com
Here is some of the related CSS for Open Sans:
以下是 Open Sans 的一些相关 CSS：
@font-face {
font-family: 'OpenSansSemibold';
src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot');
src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'),
url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-weight: normal;
font-style: normal;
}
/* ... */
h2 {
font-family: 'OpenSansSemibold', Arial, sans-serif;
/* ... */
}
Each font I use on the site is declared in a similar way. The Great Vibes declaration (also in custom.css) for the "enjoy your ride" message is another one to compare. All fonts display properly in Chrome for Android and Firefox for Android on the same device, but not in Android Internet.
我在网站上使用的每种字体都以类似的方式声明。“享受你的旅程”消息的 Great Vibes 声明（也在 custom.css 中）是另一个比较。所有字体在同一台设备上的 Chrome for Android 和 Firefox for Android 中都能正常显示，但在 Android Internet 中却不能正常显示。
I need to finalize this CSS as soon as possible and am working on this project as a volunteer (not paid). So I am looking for a quick fix rather than a code review. I'm also a UX designer, not a web developer. Thanks in advance.
我需要尽快完成这个 CSS，并且作为志愿者（没有报酬）在这个项目上工作。所以我正在寻找快速修复而不是代码。我也是 UX 设计师，而不是 Web 开发人员。提前致谢。
Edit:I did some additional debugging today in Edge Inspect CC and weinre, connecting both my Android phone and my iPad to my laptop. In Weinre, I am able to change the font families on the iPad but not on the phone. I can change the font colors on both devices. So it appears the underlying issue is related to the fact that I can't change the fonts off of the defaults when I use a remote debugger.
编辑：我今天在 Edge Inspect CC 和 weinre 中做了一些额外的调试，将我的 Android 手机和 iPad 连接到我的笔记本电脑。在 Weinre 中，我可以在 iPad 上更改字体系列，但不能在手机上更改。我可以在两个设备上更改字体颜色。因此，潜在的问题似乎与当我使用远程调试器时无法更改默认字体的事实有关。
回答by BenV
We were running into a similar issue, and it was caused by our use of text-rendering: optimizeLegibility- removing that from our CSS made our fonts start working on 4.3 again.
我们遇到了类似的问题，这是由于我们使用了text-rendering: optimizeLegibility- 从我们的 CSS 中删除它使我们的字体再次开始在 4.3 上工作。
回答by Beauceron
I have the same issue here how i solve it.
我在这里有同样的问题，我如何解决它。
I only use svg on mobile with media queries.
我只在带有媒体查询的移动设备上使用 svg。
@media only screen and (max-width: 320px) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope it's help you.
希望对你有帮助。
回答by Pinal
I create jsfiddlewith only svgand wofffonts and test it on my Android 4.3 device in default browser. All works.
我jsfiddle只使用svg和woff字体创建并在默认浏览器中在我的 Android 4.3 设备上进行测试。所有作品。
I just remove all unnecessary fonts for mobile. All mobile supportssvgfonts, FF and IE10 needswoff. So you can use media queries for separate font-face defenition: for mobile and for desktop.
我只是删除了所有不必要的移动字体。所有手机都支持svg字体，FF 和 IE10需要woff。因此，您可以将媒体查询用于单独的字体防御：用于移动设备和桌面设备。
If you need all types of fonts check your Content-Typeheader for font files, it's always text/plainwhich is wrong:
如果您需要所有类型的字体，请检查Content-Type字体文件的标题，总是text/plain错误的：
- eothas application/vnd.ms-fontobjecttype
- otf and ttfhave application/octet-streamtype
- woffhas application/font-wofftype
- svghas image/svg+xmltype
- eot有application/vnd.ms-fontobject类型
- otf 和 ttf具有application/octet-stream类型
- woff有application/font-woff类型
- svg有image/svg+xml类型
Also check thispage to read known common problems with font face.
另请查看此页面以阅读font face.
回答by tnt-rox
I had a similar problem before and I solved it by adding font-weight: normal !important;to the elements/text that was using the font. I believe the problem was that the font weight was being inherited by the elements and this caused the font to fail.
Hope it works :)
我以前遇到过类似的问题，我通过添加font-weight: normal !important;到使用该字体的元素/文本来解决它。我认为问题在于元素继承了字体粗细，这导致字体失败。希望它有效:)
So in your code:
所以在你的代码中：
h2 {
font-family: 'OpenSansSemibold', Arial, sans-serif;
font-weight: normal !important;
/* ... */
}
回答by Mathew Porter
You could also maybe use Beacouron's solution of the media query targeting mobile, but this may be difficult if you have various Android tablet resolutions to target to.
您也可以使用 Beacouron 的针对移动设备的媒体查询解决方案，但是如果您要定位到各种 Android 平板电脑分辨率，这可能会很困难。
Another idea maybe to use a media-query targetting webkit browsers like so:
另一个想法可能是使用针对 webkit 浏览器的媒体查询，如下所示：
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
回答by Irina
As of 2017, one can use the @import query provided by fonts.google.com for the font you like. Just search for the desired font(s), select it, then in the minimized bar at the bottom of the screen, you'll have to pick @import in the 'embed' section. I've attached a screenshot for reference: https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698
截至 2017 年，您可以使用 fonts.google.com 提供的 @import 查询来获取您喜欢的字体。只需搜索所需的字体，选择它，然后在屏幕底部的最小化栏中，您必须在“嵌入”部分选择 @import。我附上了截图供参考：https: //gyazo.com/f959b6ef973d4b0df467a7a336cc3698
I've had the same problem in the mobile's default browser, but after I used that syntax, problem was solved. Don't know why, but it worked.
我在手机的默认浏览器中遇到了同样的问题，但在我使用该语法后，问题就解决了。不知道为什么，但它奏效了。
