32

我正在尝试让 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;
}
4

15 回答 15

49

如果你已经认输或者你还在为此苦苦挣扎，我强烈推荐font squirrel。它比任何其他在线 .eot 生成器都更好地替代了 WEFT。作为一个巨大的好处，它在一个 zip 文件中提供了所有需要的跨浏览器格式以及一个有效的 CSS+HTML 示例页面。这是最接近@fontface 必杀技的东西。

于 2009-12-13T03:56:09.153 回答
8

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

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}
于 2013-01-24T16:33:16.110 回答
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 向前测试和工作。

于 2017-05-24T09:54:35.847 回答
3

我在这里遇到了许多人遇到的同样问题。问题原来只是 IE 对 font-family 的值有更短的字符限制。我给了我的字体系列一个更短的名字，它最终使用了字体松鼠吐出的 css。

怪一个！

于 2014-02-03T19:15:11.880 回答
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');
}

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

于 2011-02-23T10:25:00.387 回答
2

您需要检查的一件事是

如果您执行 url('HelveticaNeueLTCom-LtCn_0.eot')，.css 文件和 .eot 应该在同一个文件夹中

或执行完整的 url 路径，如 src:url( http://www.example.com/path/to/url/Helvetica.eot )

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

ps#我在我的博客中进行字体嵌入很长时间了，它工作正常。

于 2009-11-18T06:17:39.517 回答
1

对我有用的是以下声明：

@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');
}

所以只有 1 个src属性并且.eot在它的末尾，没有问号。

我之前尝试过但没有奏效的方法：

  • 将 .eot 放在单独的一行（在另一行之前或之后src）
  • 后面打个问号.eot
于 2014-03-07T13:09:30.113 回答
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');
}
于 2013-05-05T08:35:03.683 回答
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/

于 2018-09-07T08:30:43.787 回答
0

I was having the same problem as panas. I converted from ttf to eot using onlinefontconverter.com. Well, it seems that was the problem: I just tryied fontsquirrel.com as atsjr pointed out and everything is working fine!

于 2010-12-03T17:36:08.543 回答
0

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

接下来 - 有时，IE 可能会有点迂腐地决定是否在 CSS 中的值周围使用引号。试试font-family: "HelveticaLTCN"？

于 2009-11-18T05:40:49.950 回答
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');}
于 2013-04-17T12:38:34.493 回答
0

最好在本地而不是在线直接使用 font-face 属性，例如 url('../fonts/font-name.eot')。当您在本地服务器上运行网页时，IE 和其他浏览器不会“看到”字体。

于 2014-02-10T16:05:06.703 回答
0

在解决类似问题时，我注意到该DOCTYPE定义以某种方式影响IE. 当我删除DOCTYPE定义时，字体正确显示。

于 2012-01-19T13:29:24.110 回答
0

IE 的特别之处在于它要求字体系列名称与字体属性中的名称完全相同。虽然 Chrome 和其他人可以让您根据需要命名字体系列，但 IE 并非如此

于 2016-01-11T17:47:14.400 回答