css - @ font-face在iOS和Android中不起作用

对于我当前的一个Web项目，我正在使用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没有显示（移动设备呈现后备字体，在这种情况下为“ sans-serif”）。另一方面，在所有其他桌面浏览器（包括臭名昭著的IE系列和Mozilla）上，此字体都没有问题。
我想提及一下，当我想生成一个Webfont软件包here时，有一条警告说微软已经将该字体列入了黑名单（请参阅警告的屏幕截图）：

   

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

最佳答案

网址声明后，您需要删除分号。用分号结束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;
}

关于css - @ font-face在iOS和Android中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30273619/