css - @font-face 在 IE 中显示不正确

Question

我已经搜索了几个小时，问了 friend ，但没有成功。所以我希望你们能帮助我。我的网站使用自定义字体，但 IE(10) 不支持我这样做的方式。我不知道它支持其他方法。这是我的:

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

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

当 Internet Explorer 不知道该字体时，它会使用其默认字体。但问题是，自定义字体的字体大小是完美的，但 Internet Explorer 默认字体太大了。我试图用 IE 特定的 css 代码修复它，但它根本不起作用。我正在为 Interner Explorer 使用以下 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 中的代码与上面完全相同，但没有标签等。

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

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

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

Answer 1

多种字体格式

要支持多种浏览器，请使用 .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 开发人员控制台中有一条错误消息) .

尝试的步骤:

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

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