CSS 在 IE9 中使 Adobe 字体与 CSS3 @font-face 一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5587956/
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
Make Adobe fonts work with CSS3 @font-face in IE9
提问by Piotr Szmyd
I'm in the process of building a small intranet application and try, with no luck, to use Adobe fontI purchased lately. As I was informed, in our case it's not a license violation.
我正在构建一个小型 Intranet 应用程序并尝试使用我最近购买的Adobe 字体，但没有成功。据我所知，在我们的情况下，这不是违反许可证的行为。
I converted the .ttf/.otf versions of font to .woff, .eot and .svg, so to target all major browsers.The @font-face syntax I used is basically the bulletproof one from Font Spring:
我将 .ttf/.otf 版本的字体转换为 .woff、.eot 和 .svg，以便针对所有主要浏览器。我使用的 @font-face 语法基本上是来自Font Spring的防弹语法：
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot');
src: url('myfont-webfont.eot?#iehack') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
I modified the HTTP headers (added Access-Control-Allow-Origin = "*") to allow cross-domain references. In FF and Chrome it works perfectly, but in IE9 I get:
我修改了 HTTP 标头（添加了 Access-Control-Allow-Origin = "*"）以允许跨域引用。在 FF 和 Chrome 中它运行良好，但在 IE9 中我得到：
CSS3111: @font-face encountered unknown error.
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
myfont-webfont.ttf
I noticed that when converting font from .ttf/.otf to .woff I also get an .afmfile, but I don't have a clue whether it's important or not...
我注意到当将字体从 .ttf/.otf 转换为 .woff 时，我也得到了一个.afm文件，但我不知道它是否重要......
Any ideas how to work it out?
任何想法如何解决？
[Edit] - I host my websites (fonts too, but under separate directory and subdomain for static content) under IIS 7.5
[编辑] - 我在IIS 7.5下托管我的网站（字体也是如此，但在单独的目录和子域下用于静态内容）
采纳答案by Knu
回答by user22600
As Knu said, you can use this tool, however it's compiled only for MS-DOS. I compiled it for Win64. Download.
正如 Knu 所说，你可以使用这个工具，但它只为 MS-DOS 编译。我为Win64编译了它。下载.
Usage:
用法：
Place the .exe in the same folder as the font you need to modify
Navigate to that directory in the command line
type
embed fontname.fonttype, replacing fontname with the filename and fonttype with the extension i.e.embed brokenFont.ttfAll done! Your font should now work.
将.exe放在需要修改的字体所在的文件夹中
在命令行中导航到该目录
type
embed fontname.fonttype，用文件名替换 fontname ，用扩展名 ie 替换 fonttypeembed brokenFont.ttf全部完成！你的字体现在应该可以工作了。
回答by stefannh
You should set the format of the ie font to 'embedded-opentype' and not 'eot'. For example:
您应该将 ie 字体的格式设置为 'embedded-opentype' 而不是 'eot'。例如：
src: url('fontname.eot?#iefix') format('embedded-opentype')
回答by Renjith
I was getting the following error:
我收到以下错误：
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
fontname.ttf
CSS3114：@font-face 未通过 OpenType 嵌入权限检查。权限必须是可安装的。
字体名称.ttf
After using the below code my issue got resolved....
使用下面的代码后，我的问题得到了解决....
src: url('fontname.ttf') format('embedded-opentype')
Thank you guys for helping me!
Cheers,
Renjith.
谢谢你们帮助我！
干杯，
伦吉斯。
回答by Dan
Try this, add this lines in the web.config.
试试这个，在 web.config 中添加这行。
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
回答by Patrick Knott
A Different Answer: Legal issues.
一个不同的答案：法律问题。
There's a couple of things to note before you do this. First, to get this error, in IE, inspect element, switch your tabs, and look for the errors, I believe "CSS3114" appears in the console.
在执行此操作之前，有几件事需要注意。首先，为了得到这个错误，在 IE 中，检查元素，切换你的标签，并查找错误，我相信“CSS3114”出现在控制台中。
What you need to understand is this is a licensing issue. I.E. (pun intended) if you are trying to load a font that causes this error, you don't have permissions on the file to use the font, and if you don't have permission, it is highly likely that you may lose a legal battle (which itself is highly unlikely) over using this font in this manner unless you are holding the license. So, you can, for the first time, thank IE for being the only browser to tell you "no", because it at least lets you know that you are doing something questionable.
您需要了解的是这是一个许可问题。IE（双关语）如果您尝试加载导致此错误的字体，则您对文件没有使用该字体的权限，如果您没有权限，很可能会丢失除非您持有许可证，否则以这种方式使用这种字体的法律斗争（这本身是极不可能的）。所以，你可以第一次感谢 IE 是唯一一个告诉你“不”的浏览器，因为它至少让你知道你在做一些有问题的事情。
That said, here is your answer:
也就是说，这是你的答案：
First ensure you're using the best code in .css, see some of the other css answers for that.
IE 11 css example (works in all modern browsers may need to be tweaked for IE9):
首先确保您使用的是 .css 中最好的代码，请参阅其他一些 css 答案。
IE 11 css 示例（适用于所有现代浏览器，可能需要针对 IE9 进行调整）：
@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}
Then, ensure you have a working web-font (you probably already know this by seeing your font in other browsers). If you need an online font converter, check here: https://onlinefontconverter.com/
然后，确保你有一个可用的网络字体（你可能已经通过在其他浏览器中看到你的字体知道了这一点）。如果您需要在线字体转换器，请在此处查看：https: //onlinefontconverter.com/
Finally, To get rid of the "CSS3114" error. For an online tool, click here: https://www.andrebacklund.com/fontfixer.html
最后，摆脱“CSS3114”错误。如需在线工具，请单击此处：https: //www.andrebacklund.com/fontfixer.html
回答by Stack Developer
I wasted a lot of time because of this issue. Finally I found great solution myself. Before I was using .ttf font only. But I added one extra font format .eot that started to work in IE.
因为这个问题，我浪费了很多时间。最后我自己找到了很好的解决方案。在我只使用 .ttf 字体之前。但是我添加了一种额外的字体格式 .eot 开始在 IE 中工作。
I used following code and it worked like charm in all browsers.
我使用了以下代码，它在所有浏览器中都发挥了作用。
@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf),
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}
@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}
I hope this will help someone.
我希望这会帮助某人。
回答by Font Squirrel
It is true that IE9 requires TTF fonts to have the embedding bits set to Installable. The Generator does this automatically, but we are currently blocking Adobe fonts for other reasons. We may lift this restriction in the near future.
确实，IE9 要求 TTF 字体将嵌入位设置为可安装。生成器会自动执行此操作，但我们目前出于其他原因阻止了 Adobe 字体。我们可能会在不久的将来取消此限制。
回答by bendytree
If you are familiar with nodejs/npm, ttembed-jsis an easy way to set the "installable embedding allowed" flag on a TTF font. This will modify the specified .ttf file:
如果您熟悉 nodejs/npm，ttembed-js是一种在 TTF 字体上设置“可安装嵌入允许”标志的简单方法。这将修改指定的 .ttf 文件：
npm install -g ttembed-js
ttembed-js somefont.ttf
回答by buijs
As a Mac user, I was unable to use the MS-DOS and Windows command line tools that were mentioned to fix the font embedding permission. However, I found out that you can fix this using FontLab to set the permission to 'Everything is allowed'. I hope this recipe on how to set the font permission to Installable on Mac OS Xis useful for others as well.
作为 Mac 用户，我无法使用提到的 MS-DOS 和 Windows 命令行工具来修复字体嵌入权限。但是，我发现您可以使用 FontLab 将权限设置为“允许所有内容”来解决此问题。我希望这个关于如何在 Mac OS X 上将字体权限设置为 Installable 的秘诀对其他人也有用。
