让Adobe字体在IE9中使用CSS3 @font-face的方法

Question

我正在构建一个小型的内部网络应用程序，尝试使用最近购买的Adobe字体，但没有成功。据我所知，在我们的情况下，这不是违反许可证的行为。我将字体的.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');
    }

我修改了HTTP头（添加了Access-Control-Allow-Origin =“*”），以允许跨域引用。在Firefox和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

我注意到将字体从.ttf/.otf转换为.woff时，同时会生成一个.afm文件，但我不知道它是否重要...

有什么想法吗？

[编辑] - 我使用IIS 7.5托管我的网站（也包括字体，但是在单独的目录和子域名下用于静态内容）。

- Piotr Szmyd

---

太棒了，这是一个精彩、聪明且措辞得体的问题，你已经完成了所有的功课。现在我们这些问题越来越少了！+1 - Pekka

确实这是一个很好的问题，但遗憾的是，它是一个重复的问题。 - Joseph Earl

不，这绝对不是重复的问题，因为在非Adobe字体中，我找到的解决方案完美地运行。不同之处在于，我猜测跨域字体引用不是这种情况 - 我使用.woff字体时会出现“@font-face遇到未知错误”的情况，而在其他提到的情况下则是“@font-face失败的跨域请求”。 - Piotr Szmyd

在更改嵌入选项后，我遇到了这行代码的问题：url('myfont-webfont.eot?#iehack') format('eot'), 。删除它解决了最后一个错误（未知错误）。 - Jonathan DeMarks

Answer 1

我只能告诉你如何修复“CSS3114”错误。
您需要更改TTF文件的嵌入级别。

使用适当的工具，您可以将其设置为"可安装嵌入允许"。
对于64位版本，请查看@user22600的答案。

- Knu

---

关于ttfpatch的注意事项：使用fsType=0。 - Collin Price

ttfpatch 对我没有起作用。错误：tableversion 必须是 0、1 或，十六进制为:003。 - Don Rolling

嵌入式工作正常。只需下载源代码并编译...这是StackOverflow，对吧？它只有一个文件。 :-) 对于VS2010，您需要添加：#include <string.h> - Jonathan DeMarks

谢谢鼓励——ttfpatch 对我也没用，但是重新编译 64 位的 embed.c 绝对解决了问题。 - Peter Majeed

对于那些不熟悉在Windows上编译C程序的人来说，这非常简单。请按照微软提供的指南进行操作：https://msdn.microsoft.com/zh-cn/library/bb384838.aspx - lee_mcmullen

Answer 2

正如Knu所说，您可以使用这个工具，但是它仅编译为MS-DOS。我将其编译为Win64版本。下载。

用法：

1. 将 .exe 文件放在需要修改字体的相同文件夹中

2. 在命令行中导航到该目录

3. 输入 embed fontname.fonttype，将 fontname 替换为文件名，fonttype 替换为扩展名，例如 embed brokenFont.ttf

4. 完成！您的字体现在应该可以使用了。

- user22600

---

感谢报告。已修复。 - user22600

使用Win64位exe确实帮了我很多。 - imdadhusen

我的天，太神奇了。顺便提醒大家：使用Windows命令行而不是像GIT BASH这样的替代工具，我通常更喜欢bash，但在这里不起作用。 - Halter

哇！太棒了！ - oldboy

Answer 3

你应该将IE字体的格式设置为“embedded-opentype”，而不是“eot”。

例如:

src: url('fontname.eot?#iefix') format('embedded-opentype')

- stefannh

---

谢谢，但那不是情况所在。这完全是关于将权限嵌入字体本身的问题。 - Piotr Szmyd

这适用于Firefox和Chrome（IE已经在工作了）。谢谢！ - Dmitri Mogilevski

Answer 4

我遇到了以下错误：

CSS3114：@font-face 失败，OpenType 嵌入权限检查不通过。 权限必须是可安装的。
fontname.ttf

使用下面的代码后，我的问题得到了解决...

src: url('fontname.ttf') format('embedded-opentype')

非常感谢大家的帮助！
祝好，
Renjith。

- Renjith

---

我认为你的解决方案适用于某些字体系列，但不适用于其他字体系列。这取决于字体的嵌入权限级别。例如，对于Abadi字体，这种方法不起作用。 - Philip007

是的，这对我的.ttf文件没有任何影响，我仍然收到“必须可安装权限”的错误信息。解决这个问题的方法是运行克里斯蒂安的.exe文件（在此页面的其他位置），以修改.ttf文件。完成后，IE11 会正确显示我的网页上的.ttf字体。 - Mike Gledhill

Answer 5

尝试这个，在web.config中添加这些行。

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>

- Dan

---

我认为那不是他报告的同一个错误，但如果你正在从IIS提供.woffs，则需要这样做。或者，您可以在HKLM \ Software \ Classes下添加一个.woff的注册表键，并设置其中的“内容类型”值。然而，维基百科表示[正确的类型是application / font-woff]（http://en.wikipedia.org/wiki/Web_Open_Font_Format）。 - Rup

确实，这是一件不同的事情。我有这个条目 - 问题出在一个已经下载的字体上，由于嵌入式权限无法在IE中打开。 - Piotr Szmyd

我在Apache环境中进行开发，当我将字体文件移动到Windows IIS服务器时，这解决了我的问题。 - Samuel Cook

Answer 6

不同的答案：法律问题。

在进行操作之前，需要注意几件事情。首先，在IE中获取此错误，检查元素，切换标签，然后查看错误，我相信“CSS3114”将出现在控制台中。

你需要了解的是这是一个许可问题。也就是说，如果你试图加载一个会导致这个错误的字体，你没有使用该字体的文件的权限，如果你没有权限，在这种情况下使用该字体，你很可能会输掉一场法律诉讼（虽然这本身是高度不太可能的），除非你持有该许可证。因此，你可以感谢IE第一次告诉你“不”，因为它至少让你知道你正在做一些可疑的事情。

话虽如此，以下是你要找的答案：

首先确保你在.css中使用最好的代码，关于这点，可以参考其他css答案。
IE 11 css示例（适用于所有现代浏览器，可能需要针对IE9进行微调）：

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

首先，确保您拥有一个可用的Web字体（通过在其他浏览器中查看您的字体，您可能已经知道了这一点）。如果您需要在线字体转换器，请访问此处：https://onlinefontconverter.com/

最后，要摆脱“CSS3114”错误。对于在线工具，请单击此处：https://www.andrebacklund.com/fontfixer.html

- Patrick Knott

---

这个在线工具帮我修复了它。谢谢！ - James Hibbard

Answer 7

因为这个问题，我浪费了很多时间。 最后我自己找到了一个好的解决方案。 以前我只使用.ttf字体。 但是我添加了一个额外的字体格式.eot，在IE中开始工作。

我使用了以下代码，在所有浏览器中都可以正常工作。

@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);
}

希望这能帮助到某些人。

- Stack Developer

Answer 8

确实，IE9需要将TTF字体的嵌入位设置为可安装。生成器会自动完成此操作，但我们目前由于其他原因阻止了Adobe字体。我们可能会在不久的将来取消此限制。

- Font Squirrel

Answer 9

如果您熟悉Node.js/npm，则ttembed-js是一种轻松的方式，可以在TTF字体上设置“可安装嵌入允许”标志。这将修改指定的.ttf文件：

npm install -g ttembed-js

ttembed-js somefont.ttf

- bendytree

---

谢谢 - 这对于在IE11中引起问题的.otf字体非常有效。 - J Sprague

Answer 10

作为一名Mac用户，我无法使用提到的MS-DOS和Windows命令行工具来修复字体嵌入权限。然而，我发现可以使用FontLab将权限设置为“允许所有内容”，从而解决此问题。我希望这篇关于如何在Mac OS X上设置字体权限的文章对其他人也有用。（设置字体权限可安装）

- buijs

---

我无法使用MS-DOS和Windows命令行工具，但是源代码已经提供了 - 我希望它可以在Mac上编译？ - Rup

抱歉，我的意思是：我是一个被宠坏的OS X Finder用户。 - buijs