@font-face 在 Android 浏览器中不起作用

Posted 2023-03-06

【中文标题】@font-face 在 Android 浏览器中不起作用

【英文标题】：@font-face not working in Android browsers

【发布时间】：2012-06-12 07:05:19

【问题描述】：

除了android Browser 和Firefox for Android（来自http://oftn.org/css/global.css）之外，以下@font-face 声明在每个主要浏览器(including Chrome for Android) 中都能正常工作：

@font-face 
        font-family: "OFTN Aller";
        src: url("../fonts/OFTN-Aller-Bold.woff") format("woff"),
             url("../fonts/OFTN-Aller-Bold.ttf") format("truetype");
        font-weight: bold;
        font-style: normal;

@font-face 
        font-family: "OFTN Aller";
        src: url("../fonts/OFTN-Aller.woff") format("woff"),
             url("../fonts/OFTN-Aller.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;

我做错了什么？

截图

Android 4.0.3 浏览器：

Windows 7 上的 Chrome 19：

Windows 7 上的 Firefox 13：

【参考方案1】：

.woff 在 android 中不受支持

检查 font support

编辑：我认为页面加载正确，因为它在桌面上看起来相同。

Our Name
ΩF:∅ means "ohm-farad to none", and we usually pronounce it as "often".

【讨论】：

这就是为什么我也包含 TrueType 字体的原因……我将包含主要浏览器的屏幕截图以进行比较。

尝试仅使用 truetype 加载它。删除 .woff 进行检查。

我以前也这样做过，没有任何区别。

它应该可以工作。也许您可以尝试使用 fontsquirrel 随机字体来检查您自己的字体是否以某种方式损坏或损坏？

尝试删除 .woff 并在其他平台上加载以查看 truetype 是否正常工作。

【参考方案2】：

我将 OFTN Aller（粗体）子集更多，因为我不再将它用于其他标题（仅徽标），这似乎解决了问题。