Question

我的三星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 for Android设备上正常显示，但不适用于Android Internet。

我需要尽快完成这个CSS，并且正在以志愿者（未付费）的身份开展这个项目。所以我正在寻找快速修复而不是代码审查。我也是一名用户体验设计师，而不是网络开发人员。提前谢谢。

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

Answer 1

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

Answer 2

我在这里有同样的问题如何解决它。

我只在移动设备上使用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;
    }
}

希望它对你有所帮助。

Answer 3

我只使用svg和woff字体创建jsfiddle，并在默认浏览器中在我的Android 4.3设备上进行测试。一切正常。

我只删除了所有不必要的移动字体。所有移动supports svg字体，FF和IE10 needs woff。因此，您可以使用媒体查询进行单独的字体 - 表面防御：适用于移动设备和桌面设备。

如果您需要所有类型的字体，请检查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已知的常见问题。

Answer 4

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

所以在你的代码中：

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

Answer 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;
    }
}

Answer 6

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

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

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

6 个答案: