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

Question

.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

Answer 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

Answer 2