Question

我一直在寻找几个小时，问朋友，但没有成功。所以我希望你们能帮助我。我的网站使用自定义字体，但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中的代码与上面的代码完全相同，但没有标签ect。

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

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

亲切的问候， Bart Roelofs

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规则时，使用所有三种字体格式，在所有版本的IE中正确呈现Shardee字体（尽管在IE开发者控制台中有错误消息）。

尝试的步骤：

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

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

Answer 2

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

Answer 3

FontPrep是适用于Mac OS X的优秀Web字体生成器。它甚至可以创建fonts.css

Answer 4

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

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

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

Answer 5

我遇到了同样的问题并运行了F12。似乎在IE10中为我所在的站点启用了兼容性视图。禁用兼容性视图后，显示自定义字体。希望这有助于某人...

Answer 6

通过搜索网络，我发现这个在线工具可以对TTF字体进行修复，使其可以通过资源管理器显示： https://www.andrebacklund.com/fontfixer.html

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

6 个答案: