我的三星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;
/* ... */
}
我在网站上使用的每个字体都以类似的方式声明。 “享受你的骑行”消息的伟大的声音声明(也在custom.css)是另一个比较。所有字体在Chrome for Android和Android版Firefox都可以在同一台设备上正常显示，但不能在Android Internet中显示。
我需要尽快完成这个CSS，并且正在从事这个项目，作为志愿者(未付款)。所以我正在寻找一个快速修复而不是代码审查。我也是一个UX设计师，而不是网页开发者。提前致谢。
编辑：我今天在Edge Inspect CC和weinre中进行了一些额外的调试，将我的Android手机和iPad连接到笔记本电脑。在Weinre，我可以改变iPad上的字体，但不能在手机上。我可以更改两个设备上的字体颜色。所以看起来，底层的问题是与我使用远程调试器时不能更改默认值的字体相关的事实。
解决方法
我有同样的问题，我如何解决它。
我只在手机上使用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;
}
}
希望它帮助你
