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

【问题标题】：@font-face works locally on IE10, but not on the server@font-face 在 IE10 本地工作，但不在服务器上
【发布时间】：2014-11-12 01:30:08
【问题描述】：

我检查了，字体文件在服务器上：

@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

【问题讨论】：

有时 url 必须采用文件的整个路径。
好点。我刚刚尝试过，但它仍然无法正常工作......它没有默认为网络字体......它看起来很奇怪，很瘦而且有别名。
你的服务器的 .htaccess 是什么样的（我假设你在 apache 上）。
我依稀记得遇到过类似的问题。如果我没记错的话，对我来说，字体文件实际上有问题。我不得不要求字体提供商（在我的例子中是 myfonts.com）为我重新生成字体文件。
奇怪的是它在我将文件上传到服务器之前（意思是，在我的计算机上本地）......？

标签： css font-face

【解决方案1】：

尝试删除这部分：

local('☺')

或者在这部分也添加其余的字体，比如

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

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

尝试使用这个工具来创建你的字体： http://www.fontsquirrel.com/tools/webfont-generator

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

【讨论】：

我有所有的字体（在每个 URL 中输入要检查）
尝试使用这个工具来创建你的字体：fontsquirrel.com/tools/webfont-generator
您是否尝试选择“专家”控制选项并将“EOT 压缩”更改为“EOT Lite”？

【解决方案2】：

我在 IIS 服务器上遇到了同样的问题，我终于意识到，我必须将 mime 类型“woff”添加到 ISS，以便传递文件。其他浏览器好像支持其他文件类型，所以在不能访问woff的时候就拿别人了，但是ie11需要woff。

【讨论】：

【解决方案3】：

8 之前的 IIS-Server 版本似乎没有默认添加 mime 类型“woff”。将其添加到列表中（服务器 > 您的站点 > mime-types），您应该没问题。这至少为我解决了 IE 11 中的 CSS3114 错误。 FF 和 Chrome 从来没有遇到过问题，因为它们在这一点上似乎没有那么严格。

【讨论】：