Question

我正在尝试让Internet Explorer渲染漂亮的字体。它不起作用。它们在Firefox中运行良好，我可以在我的Apache访问日志中看到IE已经取消了字体。所以它正在解析font-face CSS标签，而不是渲染它们。

我用来转换字体的网站是：http://www.kirsle.net/wizards/ttf2eot.cgi。我尝试了微软的WEFT工具，但它无法正常工作。安装并打开后，它说“第一次运行它，执行此操作......”然后它会不断挂起。

这是我的CSS：

@font-face
{
   font-family: 'HelveticaLTCN';
   src: url('HelveticaNeueLTCom-LtCn_0.eot');
   src: local('HelveticaNeuel TCom LtCn'), url('HelveticaNeueLTCom-LtCn_0.ttf') format('TrueType');
}

关于IE为何不渲染字体的任何想法？

编辑：还应该提一下，我用以下字体调用字体：

p .mytext
{
   font-family: HelveticaLTCN;
}

Answer 1

如果你已经放弃了，或者你还在努力解决这个问题，我强烈推荐font squirrel。它取代了WEFT远远超过任何其他在线.eot发电机。作为一个巨大的奖励，它提供了一个zip文件中所有需要的跨浏览器格式以及一个有效的CSS + HTML示例页面。这是@fontface nirvana最接近的事情。

Answer 2

请记住：.eot字体必须是最后一个“src”。如果没有，IE将重写配置并使字体崩溃。

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}

Answer 3

Internet Explorer对其他@ font-face定义有点不确定。我之前发现这有很大的帮助 - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

总之，他们建议最好的方法如下。唯一的变化是在字体网址的末尾添加问号。很奇怪，不是吗？

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

列出了许多其他替代方案，即为其他人指定EOT文件的单独@ font-face标签。

Answer 4

我遇到过许多人遇到的同样问题。问题只是简单地说IE对font-family的值有较短的字符限制。我给了我的font-family一个更短的名字，它最终使用了字体松鼠吐出的CSS。

很奇怪！

Answer 5

这对我有用：

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Medium.woff') format('woff');
    src         : url('../fonts/din/DINPro-Medium.otf') format('otf');
    src         : url('../fonts/din/DINPro-Medium.ttf') format('truetype');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Regular.woff') format('woff');
    src         : url('../fonts/din/DINPro-Regular.woff2') format('woff2');
    src         : url('../fonts/din/DINPro-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Regular.eot?');
    font-weight : 400;
    font-style : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Medium.eot?');
    font-weight : 500;
    font-style : normal;
}

请注意，我使用-ie后缀单独为IE定义了字体。使用字体时，我会做p { font-family : din-pro, din-pro-ie }之类的事情。使用仿真从IE5进行测试和工作。

Answer 6

您需要检查的一件事是

如果你做网址，那么

.css文件和.eot应该在同一个文件夹中（'HelveticaNeueLTCom-LtCn_0.eot'）

或者像src：url（http://www.example.com/path/to/url/Helvetica.eot）

那样执行完整的url路径

据我所知，报价是可选的。

ps＃我在博客中长时间进行字体嵌入，工作正常。

Answer 7

font-face 的最佳定义是：

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Answer 8

对我有用的是以下声明：

@font-face {
    font-family: 'Frutiger45LightBoldItalic';
    src: local('☺'), url('../font/frutiger-bolditalic-webfont.woff') format('woff'), url('../font/frutiger-bolditalic-webfont.ttf') format('truetype'), url('../font/frutiger-bolditalic-webfont.svg#webfontR2tDy7QH') format('svg'), url('../font/frutiger-bolditalic-webfont.eot');
}

因此，只有一个src属性，.eot位于其末尾，没有问号。

我以前尝试过但没有工作：

将.eot放在另一行（在另一行src之前或之后）
在.eot

Answer 9

您可以使用https://sinonjs.org/releases/v6.2.0/spies/将TTF字体转换为现代格式（即WOFF），然后使用如下所示的强@ font-face：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

来源：Transfonter

Answer 10

IE不接受在src描述符中包含格式字符串的字体 - 第二个src行可能是罪魁祸首。如果删除它会发生什么（或删除格式字符串？）

接下来 - 有时候，对于你是否在CSS中使用值的引用，IE可能有点迂腐。请改为font-family: "HelveticaLTCN"？

Answer 11

我和panas有同样的问题。我使用onlinefontconverter.com从ttf转换为eot。嗯，这似乎是问题所在：我只是尝试使用fontsquirrel.com assjr指出并且一切正常！

Answer 12

在遇到类似问题的同时，我注意到DOCTYPE定义会以某种方式影响IE中的嵌入字体。当我删除DOCTYPE定义时，字体显示正确。

Answer 13

这段代码可以解决我在IE中遇到的问题：

  @font-face {
      font-family: 'kurdish';
      src: url('font/zkurd_aras.eot?') format('eot'), url('font/zkurd_aras.woff') format('woff'), url('font/zkurd_aras.ttf') format('truetype');}

Answer 14

最好在本地指导font-face属性而不是在线，例如URL（ '../字体/字体name.eot'）。当您在本地服务器上运行网页时，IE和其他浏览器不会“看到”字体。

Answer 15

IE的一个特别之处在于它要求font-family名称与字体属性中的名称完全相同。虽然Chrome和其他人允许您将字体系列命名为您想要的名称，但IE的情况并非如此

Internet Explorer @ font-face失败

15 个答案: