@font面声明在安卓 4.3 互联网浏览器中不起作用？

我的三星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宣言(也在定制.css)是另一个需要比较的宣言。所有字体在同一设备上的 Chrome for Android 和 Firefox for Android 中都能正确显示，但在 Android Internet 中则无法正常显示。

我需要尽快完成这个CSS，并且正在作为志愿者(无偿)从事这个项目。所以我正在寻找快速修复而不是代码审查。我也是一个UX设计师，而不是Web开发人员。提前谢谢。

编辑：我今天在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;
}
}

希望对您有所帮助。

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

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

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

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

EOT具有application/vnd.ms-fontobjecttype
OTF 和 TTF具有应用程序/八位字节流类型
woff具有应用程序/font-woff类型
SVG具有image/svg+xml类型

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

我以前遇到过类似的问题，我通过在使用该字体的元素/文本中添加font-weight: normal !important;来解决它。我相信问题是字体粗细被元素继承了，这导致字体失败。希望它能:)

所以在你的代码中：

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

您也可以使用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;
}
}

相关内容

最新更新

热门标签：