Question

我检查过并且字体文件在服务器上：

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('fontface/DroidSerif-Regular-webfont.eot');
    src: url('fontface/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/DroidSerif-Regular-webfont.woff') format('woff'),
         url('fontface/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('fontface/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    src: local('☺'),
         url('fontface/DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'DroidSerifItalic';
    src: url('fontface/DroidSerif-Italic-webfont.eot');
    src: url('fontface/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/DroidSerif-Italic-webfont.woff') format('woff'),
         url('fontface/DroidSerif-Italic-webfont.ttf') format('truetype'),
         url('fontface/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
    src: local('☺'),
         url('fontface/DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

编辑：奇怪的是，字体在IE8中正确显示，但不是IE9或IE10。

我也尝试过：

@font-face {
    font-family: 'DroidSerifRegular';
    src: local('☺'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.woff') format('woff'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

我的.htaccess：

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

另一个编辑：

我刚刚在IE中查看了，我收到了这条消息：

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable

Answer 1

尝试删除此部分：

local('☺')

或者在这部分中添加其余字体，例如

src: local('☺'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');

你能确认你在服务器上也有这些字体吗？

尝试使用此工具创建yout字体： http://www.fontsquirrel.com/tools/webfont-generator

选择“专家”控制选项，然后从“EOT压缩”更改为“EOT Lite”

Answer 2

我在IIS服务器上遇到了同样的问题并最终意识到，我必须添加mime-type＆＃34; woff＆＃34;到国际空间站，以便交付文件。似乎其他浏览器支持其他文件类型，因此当他们无法访问woff时他们会占用其他文件，但ie11需要woff。

Answer 3

8之前的IIS-Server版本似乎没有mime-type＆＃34; woff＆＃34;默认添加。将它添加到列表（服务器＆gt;您的网站＆gt; mime-types），你应该没问题。这至少解决了IE 11中的CSS3114错误。 FF和Chrome从来没有遇到任何问题，因为它们在这一点上的限制似乎较少。

@ font-face在IE10本地工作，但不在服务器上工作

3 个答案: