@font-face 声明在 Android 4.3 Internet 浏览器中不起作用？答案

【问题标题】：@font-face declarations don't work in Android 4.3 Internet browser?@font-face 声明在 Android 4.3 Internet 浏览器中不起作用？
【发布时间】：2014-01-20 08:18:22
【问题描述】：

我的三星 Galaxy S3 手机最近从 Android 4.1.3 升级到了 Android 4.3。现在我设计的几个在 Android 互联网浏览器中测试的网站没有显示我用@font-face 声明的字体。我需要做什么来解决这个问题？

其中一个站点（开发版）：http://beta.kdfansite.com

以下是 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;
    /* ... */
}

我在网站上使用的每种字体都以类似的方式声明。 “享受你的旅程”消息的 Great Vibes 声明（也在 custom.css 中）是另一个要比较的声明。所有字体在同一设备上的 Android 版 Chrome 和 Android 版 Firefox 中都能正常显示，但在 Android Internet 中则不正常。

我需要尽快完成此 CSS，并以志愿者（未付费）的身份从事此项目。所以我正在寻找快速修复而不是代码审查。我也是 UX 设计师，而不是 Web 开发人员。提前致谢。

编辑：我今天在 Edge Inspect CC 和 weinre 中进行了一些额外的调试，将我的 Android 手机和 iPad 连接到我的笔记本电脑。在 Weinre，我可以在 iPad 上更改字体系列，但不能在手机上更改。我可以更改两个设备上的字体颜色。因此，根本问题似乎与我在使用远程调试器时无法更改默认字体这一事实有关。

【问题讨论】：

在这里我想知道为什么我的 S3 没有获得 4.3 android 更新
可能重复？查看此 SO 页面：stackoverflow.com/questions/16223771/…
@Phlume - 我正在考虑这个问题，但我有不同版本的 Android (4.3)。这个问题也特定于 Android 的默认互联网浏览器。我的在 Android 4.0 和 4.1 以及适用于 Android 的 Chrome/Firefox 中运行良好。
很公平。关于那篇文章，SVG 格式是否也不适用于您的？我问只是因为当我测试您的 svg 路径时，该位置没有导致任何事情发生……与提示下载文件的 .ttf 或 .eot 不同。
我在其他几个网站（我尝试了 Font Squirrel 和其他几个设计师的网站）上看到 .svg 文件也发生了同样的事情，但这些网站都在 Android 浏览器上正确显示字体。唯一看起来不同的是，这些网站使用相对路径作为他们的字体，但是当我在我的网站上进行更改时，字体仍然在我的笔记本电脑上正确显示，而在我的手机上却不正确。

标签： css cross-browser font-face android-4.3-jelly-bean android-internet

【解决方案1】：

我有同样的问题，我如何解决它。

我只在带有媒体查询的移动设备上使用 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;
    }
}

希望对你有帮助。

【讨论】：

谢谢，欢迎！这是一个很大的帮助。它适用于我测试过的所有浏览器：Chrome、Firefox、IE 和桌面版 Safari；适用于 iPad 的 Safari 和 Chrome； Android 互联网和适用于 Android 的 Chrome。我测试过的唯一一个不起作用的浏览器是 Firefox for Android。您是否立即知道是否有一种方法可以在不破坏其他浏览器的情况下解决该问题？
另外，由于媒体查询的主体是相同的，将媒体查询写成@media only screen and (max-width: 320px), screen and (max-device-width: 720px) and (orientation:portrait), screen and (max-device-width: 1280px) and (orientation:landscape) 将节省代码。这让我很担心，因为我的网站使用了多种字体。
您，先生，绝对是个传奇！！非常感谢！！
效果很好，但波斯语字符不粘在一起

【解决方案2】：

我们遇到了类似的问题，这是由我们使用 text-rendering: optimizeLegibility 引起的 - 从我们的 CSS 中删除它会使我们的字体重新开始在 4.3 上工作。

【讨论】：

我们的项目也是如此。三星 Galaxy S3 运行 4.3，带有 eot 和 woff 字体文件。谢谢！
在 4.3 上使用 Galaxy S3 确认。
android 4.4.2 确认，非常感谢，没想到

【解决方案3】：

我只使用svg 和woff 字体创建jsfiddle，并在我的Android 4.3 设备上的默认浏览器中对其进行测试。所有作品。

我只是删除了所有不必要的移动字体。所有移动supportssvg字体，FF和IE10needswoff。因此，您可以将媒体查询用于单独的字体定义：移动设备和桌面设备。

如果您需要所有类型的字体，请检查字体文件的 Content-Type 标头，它总是 text/plain 这是错误的：

eot 具有 application/vnd.ms-fontobject 类型
otf 和 ttf 有 application/octet-stream 类型
woff 具有 application/font-woff 类型
svg 有 image/svg+xml 类型

还可以查看this 页面以阅读font face 的已知常见问题。

【讨论】：

这仍然适用于桌面上的所有主要网络浏览器吗？我不想为一种类型的设备修复字体并为另一种设备破坏它们，所以我今天将对此进行测试。
jsfiddle 对我有用，但是当我在我的 CSS 文件中进行更改并在我的手机上重新测试该网站时，它在那里不起作用。
你的网站beta.kdfansite.com现在有新的变化吗？
当前版本使用了 FontSquirrel 为我推荐的修复程序。他们希望我在没有绝对路径的情况下尝试他们的版本。您的 jsfiddle 中的版本不适用于绝对或相对路径。我现在正在研究 Content-Type 标头。
我不确定如何更改字体的 Content-Type 标头。从网站的 HTML 或 CSS 代码来看，这一点并不明显。我在哪里可以做到这一点？

【解决方案4】：

我之前遇到过类似的问题，我通过将font-weight: normal !important;添加到使用该字体的元素/文本来解决它。我认为问题在于元素继承了字体粗细，这导致字体失败。希望它有效:)

所以在你的代码中：

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}

【讨论】：

这对我的 Android 4.3 设备不起作用。您能否发布一个指向适用于该修复程序的示例网页的链接？
@David 只需确认您的 TTF 字体没有损坏。一些在线字体转换器在转换过程中会丢弃字体。
eot = IE9,eot?#iefix = IE6-IE8, woff = FF/Chrome, ttf = safari / android / ios, svg = legacy ios 或者如果 ttf 失败
当我打开 TTF 字体时，我可以在 Windows 资源管理器中查看它们。这是我唯一需要检查的吗？

【解决方案5】：

您也可以使用 Beacouron 的针对移动设备的媒体查询解决方案，但如果您要针对各种 Android 平板电脑分辨率，这可能会很困难。

另一个想法可能是使用针对 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;
    }
}

【讨论】：

【解决方案6】：

从 2017 年开始，您可以使用 fonts.google.com 提供的 @import 查询来获取您喜欢的字体。只需搜索所需的字体，选择它，然后在屏幕底部的最小化栏中，您必须在“嵌入”部分选择@import。我附上了截图供参考： https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

我在手机的默认浏览器中遇到了同样的问题，但在我使用该语法后，问题就解决了。不知道为什么，但它奏效了。

【讨论】：