16

我的三星 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 上更改字体系列，但不能在手机上更改。我可以更改两个设备上的字体颜色。因此，根本问题似乎与我在使用远程调试器时无法更改默认字体这一事实有关。

4

6 回答 6

19

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

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

希望对你有帮助。

于 2014-01-10T17:02:45.127 回答
19

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

于 2014-04-18T21:06:13.737 回答
2

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

我只是删除了所有不必要的移动字体。所有手机都支持 svg字体，FF和IE10需要 woff。因此，您可以将媒体查询用于单独的字体定义：移动设备和桌面设备。

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

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

另请查看此页面以阅读已知的常见问题font face。

于 2014-01-05T21:32:46.997 回答
1

您也可以使用 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;
    }
}
于 2014-05-23T08:21:21.567 回答
1

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

所以在你的代码中：

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}
于 2014-01-06T14:08:39.980 回答
-1

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

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

于 2017-06-23T11:11:33.190 回答