logo标签列表

Internet Explorer中的@font-face无法正常工作

cssinternet-explorerfont-face
32

我正在尝试让Internet Explorer渲染我的漂亮字体，但它无法正常工作。这些字体在Firefox中可以正常显示，并且我可以在我的Apache访问日志中看到IE已经获取了这些字体。所以它正在解析font-face CSS标签，只是不渲染它们。

我使用的转换字体的网站是：http://www.kirsle.net/wizards/ttf2eot.cgi。我尝试过Microsoft的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;
}
15个回答
49
如果您已经放弃或者仍然在苦苦挣扎，我强烈推荐字体松鼠。它比任何其他在线.eot生成工具更好地替代了WEFT，作为一个巨大的奖励，它提供了一个zip文件，其中包含所有必要的跨浏览器格式以及一个可工作的CSS+HTML示例页面。 这是迄今为止最接近@fontface极乐世界的东西。
它向用户呈现了非常有用的选项，确实很详细。例如，指出SVG和WOFF是适合某些情况的格式（并且还列出了哪些情况）。 - ZJR
它会在Ubuntu Oneiric中同时导致Chrome和Firefox崩溃... 这是文件对话框的某些问题，但我无法确定原因... :( - tutuca
1
我想我爱上了字体松鼠。非常感谢提供链接。 - Rob Forrest
Helvetica Neue被Font Squirrel列入黑名单。还有其他选项吗？ - Tomi Seus
Font Squirrel解决了我在字体方面遇到的问题！这是一个8年前被创建者放弃的旧字体，存在问题，但Font Squirrel修复了该字体并使其在IE中正常工作！！ - BillyNair
尝试了几个小时来解决这个问题...谷歌！为什么你不是第一个结果？ - Claudiu Creanga
8
记住：.eot字体必须是最后一个“src”。否则，IE会重写配置并崩溃字体。
@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}
有时候，生活就像这样简单...我在IE 10,11中遇到了这个问题，当从某个URL提供页面时（但在本地提供时字体显示正确）。 - bvgheluwe
2
但现在它在Firefox和Safari中出现了故障。 - bvgheluwe
然后看一下MahmoudS的答案，你需要使用src: url(fonts/Aller_Bd.ttf) format("truetype"), url(fonts/Aller_Bd.eot) format("eot") - 注意逗号而不是分号，这样就可以了。 - WoodyDRN
4
这对我有用：
@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开始都可以正常工作。
3

Internet Explorer对里面其他的@font-face定义有点难以处理。我之前发现这篇文章非常有用 - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

简而言之，他们推荐最好的方式是以下步骤。唯一的变化是在字体URL末尾添加一个问号。很奇怪，不是吗？

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

还有其他几个选择，即指定单独的@font-face标签用于EOT文件和其他文件。

3

我遇到了和这里很多人一样的问题。问题最终被证明只是IE对font-family值的字符限制更短。我给我的font-family起了一个较短的名称，最终使用font squirrel输出的CSS成功了。

真是个奇怪的问题！

2
你需要检查的一件事是：如果你使用url('HelveticaNeueLTCom-LtCn_0.eot')，.css文件和.eot文件应该在同一个文件夹中。或者你可以使用完整的url路径，例如src:url(http://www.example.com/path/to/url/Helvetica.eot)。引号是可选的，据我所知。
另外，我已经在我的博客上嵌入字体很长时间了，一切都运行良好。
CSS全部嵌入了HTML文档中。HTML文档和字体在同一个目录中。以防万一，我尝试使用绝对路径URL而不是相对路径。仍然没有起作用。这是当前的代码：http://codepad.org/j396KfJx 如果有任何影响，它正在本地主机上运行。虽然我看不出为什么会有影响。还有其他想法吗？ :/ - panas
你尝试过对所有标签使用*吗？ 如果那个不起作用，也许你应该再试一次WEFT。 我使用WEFT，它对我很有效。 - YOU
还是失败了。你用的是Vista吗？每次我尝试运行WEFT时，它都会在第一次加载字体的阶段崩溃。我尝试将其设置为在Windows 98（兼容模式）下运行，但仍然发生了同样的事情。你用的是哪个版本的Windows？ :/ - panas
我的电脑是XP，顺便说一句，如果你能在网上发布你的测试页面，那么一些人就可以查看它。 - YOU
我目前没有服务器可以上传字体和HTML文件。但是我发布的codepad.org链接中包含了所有相关代码。唯一可能存在的问题就是字体。代码本身没有问题。我想我会尝试让WEFT工作起来。 - panas
我在使用IE浏览器时遇到了同样的问题，但是Firefox和其他浏览器都没有问题。我尝试了几个在线EOT字体生成器和WEFT（顺便说一下，这是一个非常有缺陷的程序），但是它们生成的字体无效。最后我尝试使用Font Squirrel，它完美地解决了我的问题。你也可能有无效或损坏的字体文件。 - Jestep
1
你可以使用Transfonter将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 */
}

来源：https://css-tricks.com/snippets/css/using-font-face/

1
最好的 font-face 定义是：
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
不在IE浏览器中，看来是这样的。 - bvgheluwe
1
我所使用的声明如下：

What worked for me is the following declaration:

@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 后面加上问号
0

这段代码可以解决我的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');}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接