CSS Internet Explorer @font-face 失败

Question

提问by panas

I'm trying to get Internet Explorer to render my pretty fonts. It's not working. They work fine in Firefox and I can see in my Apache access logs that IE has pulled the fonts. So it's parsing the font-face CSS tag, just not rendering them.

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

The site I used to convert the fonts was: http://www.kirsle.net/wizards/ttf2eot.cgi. I tried that WEFT tool by Microsoft but it wouldn't work properly. After installing and opening it, it said 'First time running it, do this...' then it continually hanged.

我用来转换字体的网站是：http: //www.kirsle.net/wizards/ttf2eot.cgi。我试过微软的 WEFT 工具，但它不能正常工作。安装并打开后，它说“第一次运行它，请这样做......”然后它一直挂起。

Here's my CSS:

这是我的 CSS：

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

Any ideas as to why IE isn't rendering the fonts?

关于为什么 IE 不呈现字体的任何想法？

EDIT: Should also mention, I'm calling the font with:

编辑：还应该提到，我用以下方式调用字体：

p .mytext
{
   font-family: HelveticaLTCN;
}

Answer 1

回答by atsjr

If you've thrown in the towel or you're still struggling with this I stronglyrecommend font squirrel. It replaces WEFT far better than any of the other online .eot generators. As a huge bonus, it supplies all needed cross-browser formats in one zip file along with a working CSS+HTML sample page. It's the closest thing yet to @fontface nirvana.

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

Answer 2

回答by Dan Palmieri

Remember that: .eot fonts must be the last one "src". If not, IE will rewrite the config and crash the font.

请记住：.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

回答by Zankar

This worked for me:

这对我有用：

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

Notice that I defined the font for IE seperately with a -iesuffix. When using the font I would do something like p { font-family : din-pro, din-pro-ie }. Tested and working from IE5 forward using emulation.

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

Answer 4

回答by Adam Bales

I had the same issues many folks here encountered. The issue turned out to be simply that IE has a shorter character limit on the value of font-family. I gave my font-family a shorter name and it finally worked using the css that font squirrel spit out.

我在这里遇到了很多人遇到的同样问题。事实证明，问题很简单，即 IE 对 font-family 的值有较短的字符限制。我给我的字体系列起了一个较短的名字，它最终使用字体松鼠吐出的 css 工作。

Weird one!

奇怪的一个！

Answer 5

回答by Overflew

Internet Explorer gets a bit iffy with the other @font-face definitions in there. I previously found this to be of amazing help - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

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

In short, they recommend the best way is the following. The only change is to add a question mark at the end of the font url. Weird, no?

总之，他们推荐的最好方法是以下。唯一的变化是在字体 url 的末尾添加一个问号。很奇怪，不是吗？

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

There are a number of other alternatives listed, namely around specifying separate @font-face tags for the EOT file from the others.

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

Answer 6

回答by YOU

One thing you need to check is

您需要检查的一件事是

.css file and .eot should be in same folder if you do url('HelveticaNeueLTCom-LtCn_0.eot')

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

or do full url path like src:url(http://www.example.com/path/to/url/Helvetica.eot)

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

Quotes are optional as far as I know.

据我所知，引号是可选的。

ps# I am doing font embedding in my blog for long time, its working fine.

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

Answer 7

回答by Mahmoud Saleh

The best definition for font-faceis:

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

回答by Fred K

You could convert your TTF font to the modern formats (ie. WOFF) using Transfonterand then use a strong @font-face like this:

您可以使用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 */
}

Source: https://css-tricks.com/snippets/css/using-font-face/

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

Answer 9

回答by bvgheluwe

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

So there is only 1 srcattribute and .eotis at the end of it, without question mark.

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

What I tried before and didn't work:

我之前尝试过但没有用的：

putting .eot on a separate line (before or after the other src)
putting a question mark after .eot

将 .eot 放在单独的行上（在另一个之前或之后src）
在后面打一个问号 .eot

Answer 10

回答by Alex

One thing that is special about IE is that it requires the font-family name to be the exact same as the name found in the font's properties. While Chrome and others let you name the font-family what you want, that's not the case for IE

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

CSS Internet Explorer @font-face 失败

提问by panas

回答by atsjr

回答by Dan Palmieri

回答by Zankar

回答by Adam Bales

回答by Overflew

回答by YOU

回答by Mahmoud Saleh

回答by Fred K

回答by bvgheluwe

回答by Alex

相关推荐

最近更新

标签

CSS Internet Explorer @font-face 失败

提问by panas

回答by atsjr

回答by Dan Palmieri

回答by Zankar

回答by Adam Bales

回答by Overflew

回答by YOU

回答by Mahmoud Saleh

回答by Fred K

回答by bvgheluwe

回答by Alex

相关推荐

CSS 将按钮组的宽度设置为 100% 并使按钮等宽？

CSS :focus 和:active 有什么区别？

“&”在 LESS CSS 中有什么作用？

CSS 输入类型=在 Firefox 中提交文本垂直对齐

相关推荐

最近更新

标签