尽管 IE，@font-face 不能在 Chrome 和 FireFox 中工作答案

【问题标题】：Despite IE, @font-face not working in Chrome and FireFox尽管 IE，@font-face 不能在 Chrome 和 FireFox 中工作
【发布时间】：2013-08-19 20:34:37
【问题描述】：

抱歉，这个问题可能是重复的，但我找不到任何问题的答案。在 css 中使用 @font-face 在 IE 中可以正常工作，但在 FireFox 和 Chrome 中无效。我想给我的网站添加一个非标准字体，所以我把文件Snazanin.ttf和Snaznnbd.ttf和css文件放到了同一个目录下，并在css中添加了以下代码：

@font-face{
        font-family: MyFont;
        src:url('Snazanin.ttf')format('truetype')   ;
    }
    @font-face{
        font-family: MyFont;
        src:url('Snaznnbd.ttf')format('truetype');
        font-weight: bold;  
    }

在另一个 css 文件中我有：

#mainframe{
    width:666px;
    margin:0px auto 0px auto;
    font-family:MyFont;
}

也在同一目录中，我有文件 .htaccess，其中包含：

AddType font/ttf .ttf

正如我之前提到的，IE 没有问题，但 chrome 和 FireFox 无法显示 MyFont 谢谢回答

【问题讨论】：

对 Chrome、Opera、Safari 和 FF 使用 WOFF 格式。对 IE 使用 EOT 格式

标签： html css .htaccess fonts font-face

【解决方案1】：

我认为这与浏览器对文件类型的支持有关。以下是一些快速参考：

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

http://caniuse.com/ttf

http://caniuse.com/woff

http://caniuse.com/eot

http://caniuse.com/svg-fonts

您可能需要提供多个字体文件。根据 w3schools 链接，ttf/eot 组合应该可以满足您的需求。

【讨论】：

感谢邓肯的参考。