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

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中在适用的设备上正常显示,但在Android Internet中则无法显示.

我需要尽快完成这个CSS,并作为一名志愿者(未付费)参与这个项目.所以我正在寻找快速修复而不是代码审查.我也是一名用户体验设计师,而不是网络开发人员.提前致谢.

编辑:今天我在Edge Inspect CC和Weinre做了一些额外的调试,将我的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;
    }
}

希望它对你有所帮助.