CSS @font-face 无法在 IE 中正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15744026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face not displaying correctly in IE
提问by Bart Roelofs
I have been searching for hours, asked friends and it didn't work out. So I hope you guys can help me. My website uses a custom font, but IE(10) doesn't support that on the way I do it. I have no idea it supports other methods. Here is mine:
我一直在寻找几个小时，问了朋友，但没有成功。所以我希望你们能帮助我。我的网站使用自定义字体，但 IE(10) 不支持我这样做。我不知道它支持其他方法。这是我的：
@font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }
It is not necessary to have a custom font in Internet Explorer, but it would be nice.
在 Internet Explorer 中没有必要使用自定义字体，但它会很好。
When Internet Explorer doesn't know the font, it used its default font. But the problem is, that the font-size of the custom font is perfect, but of the Internet Explorer default font it is way too big. I tried to fix it with a IE specific css code, but it just doesn't work at all. I am using the following css code for Interner Explorer:
当 Internet Explorer 不知道字体时，它使用其默认字体。但问题是，自定义字体的字体大小是完美的，但 Internet Explorer 默认字体的字体太大了。我试图用 IE 特定的 css 代码修复它，但它根本不起作用。我正在为 Interner Explorer 使用以下 css 代码：
<!--[if IE]>
<style>
#menu ul li{ font-size:15px; }
</style>
<![endif]-->
I have also tried it by a external stylesheet, which looked like this:
我还通过外部样式表进行了尝试，如下所示：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" />
<![endif]-->
The function I use in the php is a wordpress function that takes you to the path of your website. If you are not using wordpress, you can forget that code and leave it blank.
我在php中使用的函数是一个wordpress函数，可以带你到你网站的路径。如果您不使用 wordpress，您可以忘记该代码并将其留空。
The problem is not the path, the path is correct. I have looked into the source code in the browser, and it showed me the code I have in ie.css. The code in ie.css is exactly the same as above, but without the tags ect.
问题不在于路径，路径是正确的。我查看了浏览器中的源代码，它向我展示了 ie.css 中的代码。ie.css 中的代码与上面的完全相同，但没有标签等。
I hope you guys can help me with this problem. 2 solutions are possible as far as I know. Let the ie specific css work, or show me a way to create custom fonts in IE. I am using Internet Explorer version 10.
我希望你们能帮我解决这个问题。据我所知，有两种解决方案是可能的。让 ie 特定的 css 工作，或者告诉我一种在 IE 中创建自定义字体的方法。我正在使用 Internet Explorer 版本 10。
You can see the site here, but once it is fixed it will disappear because I don't need to put it on a subdomain once it is fixed.
您可以在此处查看该站点，但是一旦它被修复，它就会消失，因为一旦它被修复，我就不需要将它放在子域中。
Kind regards, Bart Roelofs
亲切的问候，巴特罗洛夫斯
回答by Matt Coughlin
Multiple font formats
多种字体格式
To support a wide range of browsers, use a .ttf,.woffand .eotversion of the font.
要支持广泛的浏览器，请使用字体的.ttf,.woff和.eot版本。
@font-face {
font-family: 'shardee';
src: url('fonts/Shardee.eot');
src: url('fonts/Shardee.eot?#iefix')
format('embedded-opentype'),
url('fonts/Shardee.woff') format('woff'),
url('fonts/Shardee.ttf') format('truetype');
}
You can use a Font conversion website like Font Squirrel, to convert the .ttffont into .woffand .eot.
您可以使用Font Squirrel等字体转换网站将.ttf字体转换为.woff和.eot。
DRM false positive
DRM 误报
As @Jukka pointed out, there's a legal issue with the TTF file that's preventing it from being usable in Windows. In the IE developer console, the following error message is displayed :
正如@Jukka 指出的那样，TTF 文件存在一个法律问题，导致它无法在 Windows 中使用。在 IE 开发者控制台中，显示以下错误消息：
CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable.
Shardeeappears to be an abandoned font with an unknown license type. Although it may be legal to use this font, Windows seems to require that every TTF file has DRM info that explicitly says it's legal to embed it in web pages. The error in IE is most likely a false positive.
Shardee似乎是一种许可证类型未知的废弃字体。虽然使用这种字体可能是合法的，但 Windows 似乎要求每个 TTF 文件都有 DRM 信息，明确说明将其嵌入网页是合法的。IE 中的错误很可能是误报。
To test this, I took a TTF font that's known to be legally licensed for use on websites. The TTF version didn't work in IE because of the DRM error. This example is definitely a false positive. This is one of the reasons why it's necessary to use multiple font formats, and why a single format like TTF will not work on all browsers.
为了测试这一点，我使用了一种 TTF 字体，该字体已获得合法许可，可在网站上使用。由于 DRM 错误，TTF 版本在 IE 中不起作用。这个例子绝对是一个误报。这就是为什么必须使用多种字体格式的原因之一，也是为什么像 TTF 这样的单一格式不能在所有浏览器上运行的原因之一。
Although Windows doesn't allow IE to use the TTF file, IE can still use the WOFF or EOT version. When I tested the above @font-facerule on a local webserver, using all three font formats, the Shardee font rendered correctly in all versions of IE (though with an error message in the IE developer console).
虽然 Windows 不允许 IE 使用 TTF 文件，但 IE 仍然可以使用 WOFF 或 EOT 版本。当我@font-face在本地网络服务器上测试上述规则时，使用所有三种字体格式，Shardee 字体在所有版本的 IE 中都能正确呈现（尽管在 IE 开发人员控制台中出现错误消息）。
Steps to try:
尝试步骤：
- Convertthe
.ttffile to.woffand.eot - Upload the
.woffand.eotfiles to the same directory as the existing.ttffile. - Replace the
@font-facerule with the one above. I fixed a couple typos in the initial version of it.
- 转换的
.ttf文件.woff和.eot - 将
.woff和.eot文件上传到与现有.ttf文件相同的目录。 - 用
@font-face上面的规则替换规则。我在它的初始版本中修复了几个错别字。
If you still have a problem, there may be an issue with the web server settings. Related question: IE9 blocks download of cross-origin web font
如果仍有问题，则可能是 Web 服务器设置有问题。相关问题：IE9 阻止下载跨域网络字体
回答by Arlo Carreon
IE11:If you are receiving the CSS3114error code in dev tools, you need to modify the first bits of the font file. This will allow IE to install the font.
IE11：如果您CSS3114在开发工具中收到错误代码，则需要修改字体文件的第一位。这将允许 IE 安装字体。
Npm Module:You can use ttembed-jsnpm module, which will make the modifications for you.
https://www.npmjs.com/package/ttembed-js
npm 模块：您可以使用ttembed-jsnpm 模块，它会为您进行修改。
https://www.npmjs.com/package/ttembed-js
Usage:ttembed-js path/to/Shardee.ttf
用法：ttembed-js path/to/Shardee.ttf
回答by Giorgio Barchiesi
By searching the web, I found this online tool that performs a fix on the TTF font, making it displayable by Explorer: https://www.andrebacklund.com/fontfixer.html
通过在网上搜索，我发现这个在线工具可以修复 TTF 字体，使其可以被 Explorer 显示：https: //www.andrebacklund.com/fontfixer.html
回答by Jukka K. Korpela
So the problem is apparently that on IE 10, the menu, inside the element with id=menu, does not appear in the declared font “shardee” but in the browser default font. This actually makes the menu readable. But technically, the explanation can be seen in Developer Tools (press F12 to enter them), in the Console pane. The error message, with code CSS3114, tells that @font-facedid not pass the checks for usage rights for embedding.
所以问题显然是在 IE 10 上，带有 的元素内的菜单id=menu没有出现在声明的字体“shardee”中，而是出现在浏览器的默认字体中。这实际上使菜单可读。但从技术上讲，可以在控制台窗格中的开发人员工具（按 F12 输入它们）中看到解释。代码为 CSS3114 的错误消息表明@font-face未通过嵌入使用权限的检查。
Check out the usage rights of the font, and contact the copyright holder (which is to be presumed to be Bright Ideas) for obtaining the rights if possible.
查看字体的使用权，并在可能的情况下联系版权所有者（假定为 Bright Ideas）以获取权利。
回答by S Harris
回答by TryingToWork
I ran into this same issue and ran F12. It seems compatibility view was enabled in IE10 for the site I was on. Once I disabled compatibility view the custom font displayed. Hope this helps someone...
我遇到了同样的问题并运行了 F12。似乎在 IE10 中为我所在的站点启用了兼容性视图。一旦我禁用兼容性查看显示的自定义字体。希望这可以帮助某人...
