@font-face 在 IE 中无法正确显示答案

【问题标题】：@font-face not displaying correctly in IE@font-face 在 IE 中无法正确显示
【发布时间】：2013-03-22 13:29:00
【问题描述】：

我一直在寻找几个小时，问朋友，但没有成功。所以我希望你们能帮助我。我的网站使用自定义字体，但 IE(10) 不支持我这样做的方式。我不知道它支持其他方法。这是我的：

    @font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }

没有必要在 Internet Explorer 中使用自定义字体，但它会很好。

当 Internet Explorer 不知道该字体时，它会使用其默认字体。但问题是，自定义字体的字体大小是完美的，但 Internet Explorer 默认字体的字体太大了。我尝试使用特定于 IE 的 css 代码来修复它，但它根本不起作用。我正在为内部资源管理器使用以下 css 代码：

    <!--[if IE]>
      <style>
          #menu ul li{ font-size:15px; }
      </style>
    <![endif]-->

我也尝试过使用外部样式表，如下所示：

    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" />
    <![endif]-->

我在 php 中使用的函数是一个 wordpress 函数，它可以将您带到您的网站路径。如果您不使用 wordpress，则可以忘记该代码并将其留空。

问题不在于路径，路径是正确的。我在浏览器中查看了源代码，它显示了我在 ie.css 中的代码。 ie.css 中的代码与上面完全相同，但没有标签等。

我希望你们能帮助我解决这个问题。据我所知，有两种解决方案。让 ie 特定的 css 工作，或者告诉我一种在 IE 中创建自定义字体的方法。我使用的是 Internet Explorer 版本 10。

您可以看到站点here，但是一旦它被修复它就会消失，因为一旦它被修复我就不需要将它放在子域中。

亲切的问候，巴特·罗洛夫斯

【问题讨论】：

为了让问题对未来的访问者有意义，您应该在问题中包含完整的演示代码，或者提供将不会获取的在线演示的合理永久 URL已修复（即，已删除问题）。

标签： css internet-explorer cross-browser font-face custom-font

【解决方案1】：

通过网络搜索，我发现了这个在线工具，它可以修复 TTF 字体，使其可以在 Explorer 中显示： https://www.andrebacklund.com/fontfixer.html

【讨论】：

【解决方案2】：

IE11： 如果您在开发工具中收到CSS3114 错误代码，则需要修改字体文件的第一位。这将允许 IE 安装字体。

Npm 模块： 您可以使用ttembed-js npm 模块，它会为您进行修改。 https://www.npmjs.com/package/ttembed-js

用法： ttembed-js path/to/Shardee.ttf

【讨论】：

这对我来说是最好的解决办法！

【解决方案3】：

我遇到了同样的问题并运行了 F12。我所在的网站似乎在 IE10 中启用了兼容性视图。一旦我禁用兼容性查看显示的自定义字体。希望这对某人有所帮助...

【讨论】：

【解决方案4】：

FontPrep 是一款出色的 Mac OS X 网络字体生成器。它甚至可以创建 fonts.css

【讨论】：

【解决方案5】：

多种字体格式

要支持各种浏览器，请使用 .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');
}

您可以使用Font Squirrel之类的字体转换网站，将.ttf字体转换为.woff和.eot。

DRM 误报

正如@Jukka 指出的那样，TTF 文件存在法律问题，导致它无法在 Windows 中使用。 IE开发者控制台显示如下错误信息：

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

Shardee 似乎是带有unknown license type 的废弃字体。尽管使用这种字体可能是合法的，但 Windows 似乎要求每个 TTF 文件都有 DRM 信息，明确表明将其嵌入网页是合法的。 IE 中的错误很可能是误报。

为了测试这一点，我采用了一种 TTF 字体，该字体已知已获得合法许可，可在网站上使用。由于 DRM 错误，TTF 版本在 IE 中不起作用。这个例子绝对是一个误报。这就是为什么需要使用多种字体格式的原因之一，也是为什么像 TTF 这样的单一格式不能在所有浏览器上运行的原因之一。

虽然 Windows 不允许 IE 使用 TTF 文件，但 IE 仍然可以使用 WOFF 或 EOT 版本。当我在本地网络服务器上使用所有三种字体格式测试上述@font-face 规则时，Shardee 字体在所有版本的 IE 中都正确呈现（尽管在 IE 开发者控制台中出现错误消息）。

尝试步骤：

Convert .ttf 文件到 .woff 和 .eot
将.woff 和.eot 文件上传到与现有.ttf 文件相同的目录。
将@font-face 规则替换为上述规则。我在它的初始版本中修正了几个错别字。

如果仍有问题，则可能是网络服务器设置有问题。相关问题：IE9 blocks download of cross-origin web font

【讨论】：

感谢您的回答。但它没有成功。它适用于 chrome 和 Mozilla（以及我尚未安装的更多浏览器）。但是 is 在 IE 10 中不起作用。也许我做错了什么，但我不知道应该是什么。
@BartRoelofs：我用附加信息更新了答案，并更新了@font-face 规则，该规则在使用 Shardee 字体的本地 Web 服务器上的所有 IE 版本中都可以正常工作。
可选择添加.svg 文件以支持iOS 4.1 及更早版本。
@MattCoughlin 感谢您的帮助，我也在控制台上收到该错误消息。我使用的字体很多。当我在本地运行应用程序时，它们运行良好。但是当我从那里上传相同的应用程序和 sun 时，它无法正常工作。

【解决方案6】：

所以问题显然是在 IE 10 上，带有id=menu 的元素内的菜单没有出现在声明的字体“shardee”中，而是出现在浏览器默认字体中。这实际上使菜单可读。但从技术上讲，可以在控制台窗格中的开发人员工具（按 F12 进入）中看到解释。带有代码 CSS3114 的错误消息表明 @font-face 未通过嵌入使用权限检查。

查看字体的使用权，如有可能，请联系版权持有人（推测为Bright Ideas）取得权利。

【讨论】：