为什么 chrome 在这种语法中加载 ttf 文件，而不是 woff答案

【问题标题】：Why chrome load ttf file, rather than woff, in this syntax为什么 chrome 在这种语法中加载 ttf 文件，而不是 woff
【发布时间】：2014-05-04 23:31:04
【问题描述】：

.css

@font-face {
    font-family: 'NanumBarunGothic';
    src: url(NanumBarunGothic.eot);
    src: url(NanumBarunGothic.eot?#iefix) format(‘embedded-opentype’),
    url(NanumBarunGothic.woff) format(‘woff’),
    url(NanumBarunGothic.ttf) format('truetype');
}
@font-face {
    font-family: 'NanumBarunGothic';
    src: url(NanumBarunGothicBold.eot);
    src: url(NanumBarunGothicBold.eot?#iefix) format(‘embedded-opentype’),
    url(NanumBarunGothicBold.woff) format(‘woff’),
    url(NanumBarunGothicBold.ttf) format('truetype');
    font-weight: bold;
}

.htaccess

Addtype application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woof

这是我的语法。 IE没问题。完美加载.eot。但是 Safari、Chrome 加载 .ttf 字体。为什么？那里有什么错误的语法吗？

测试页面：http://parkjinho.pe.kr:2368

【问题讨论】：

我看到 woff 格式的奇怪单引号和 truetype 的普通单引号。也许这就是问题所在。 Embedded-opentype 也使用相同的单引号。
@WojtekSurowka 你说得对。这有点奇怪。谢谢。

标签： internet-explorer google-chrome safari truetype woff

【解决方案1】：

（为什么）问题：

问题出在WOFF 文件。如果您查看 Google Chrome 控制台日志，您会注意到：

Failed to decode downloaded font: http://PATH_TO_YOUR_FONT/NanumBarunGothic.woff
OTS parsing error: incorrect file size in WOFF header

所以浏览器默认为TTF格式。如果你检查HTTP请求，你会注意到浏览器无法解析WOFF后，首先是WOFF文件，然后是TTF文件。

解决方案：

重新转换/重新生成您的 WOFF 文件。有一些解决方案。

我推荐使用：

在线：http://ttf2woff.com/
命令行：https://github.com/ananthakumaran/webify

【讨论】：

【解决方案2】：

正如 Wojtek Surowka 所指出的，您的 CSS 文件中有花引号，这可能会导致问题（尽管也可能是您在此处粘贴内容的结果）。

对于 CSS 中的引号，您应该使用 " 或 '，切勿使用以下任何一种：“ ” ‘ ’。

我还注意到您的.htaccess 文件有一个错字，您使用的是.woof 而不是.woff。

【讨论】：