@font-face 不适用于 iOS 和 Android答案

【问题标题】：@font-face does not work in iOS and Android@font-face 不适用于 iOS 和 Android
【发布时间】：2015-05-16 08:44:30
【问题描述】：

对于我当前的一个网络项目，我正在使用 Candara 字体，这是我在样式表中引用它的方式：

@font-face {
font-family: "Candara",sans-serif;
    src: url("../fonts/Candara_gdi.otf"); format('otf'),
         url("../fonts/Candara_gdi.woff"); format('woff'),
         url("../fonts/Candara.woff2"); format('woff2'),
         url("../fonts/Candara_gdi.eot"); format('eot'),
         url("../fonts/Candara_gdi.ttf"); format('truetype'),
         url("../fonts/Candara_gdi.svg#Candara-Regular"); format('svg');
font-style: normal;
font-weight: normal;
}

在移动设备上测试该网站后，我注意到 Candara 没有显示（移动设备呈现后备字体，在本例中为“无衬线”）。另一方面，这种字体在所有其他桌面浏览器上都没有问题，包括臭名昭著的 IE 系列和 Mozilla。顺便提一下，当我想生成一个webfont包here时，有一个警告说微软已经将这个字体列入黑名单（见警告截图）：

因此，我不得不使用其他一些在线解决方案“手动”转换此字体。关于这个问题的任何想法以及如何解决它？

【问题讨论】：

标签： css mobile fonts font-face

【解决方案1】：

您需要删除 url 声明后的分号。 src 的声明以分号结束。

@font-face {
    font-family: "Candara",sans-serif;
        src: url("../fonts/Candara_gdi.otf") format('otf'),
             url("../fonts/Candara_gdi.woff") format('woff'),
             url("../fonts/Candara.woff2") format('woff2'),
             url("../fonts/Candara_gdi.eot") format('eot'),
             url("../fonts/Candara_gdi.ttf") format('truetype'),
             url("../fonts/Candara_gdi.svg#svgCandara_gdi") format('svg');
    font-style: normal;
    font-weight: normal;
}

【讨论】：