Css @字体在iOS和Android中不起作用

Css @字体在iOS和Android中不起作用,css,mobile,fonts,font-face,Css,Mobile,Fonts,Font Face,对于我当前的一个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");

对于我当前的一个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软件包时,有一条警告说Microsoft已将该字体列入黑名单。请参见警告的屏幕截图:


因此,我不得不使用一些其他在线解决方案手动转换这种字体。您对这个问题有什么想法以及如何解决它吗?

您需要删除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;
}