Chrome中使用错误的MIME类型的font-face

Question

这是我使用的@font-face声明：

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

这在Firefox中运行得很好，但在Chrome中不行。在“检查元素”后，我收到了以下信息：

资源被解释为字体，但传输的MIME类型为application/octet-stream。

欢迎提出任何建议。

- moonstruck

---

在htaccess文件中添加“AddType font/ttf .ttf”怎么样？ - MatTheCat

可能是 https://dev59.com/6XE85IYBdhLWcg3wPBB8 的重复问题。 - Mike Kormendy

Answer 1

通常情况下，不同的浏览器需要不同的设置。这是一个跨浏览器的@fontface声明，取自Paul Irish博客 -

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

.eot是供IE使用的，其余浏览器使用.woff或.ttf格式。如果您需要从源字体生成不同类型的字体，请使用Font Squirrel的font-face生成器。

您还需要将.htaccess添加到字体位置，并添加以下类型：

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

- Eran Galperin

---

非常感谢。这对我非常有帮助。我正在使用.htaccess技巧，因为我有特权。 - moonstruck

有没有人有一个兼容IIS的解决方案？ - David

@david，我刚刚在IIS中解决了一个相关问题。看起来*.woff文件*没有默认映射。添加并正确配置映射对我有用... - Alex

Xander所提到的MIME类型，已添加到IIS服务器的MIME类型列表中，其值为"application/x-font-woff"，参见https://dev59.com/fXA65IYBdhLWcg3w2yk2。 - David

我在文件末尾添加了这4行代码，但仍然出现错误。需要多长时间才能使其正常工作？或者你所说的“字体位置”是什么意思？ - Michiel

Answer 2

您的字体文件没有使用正确的MIME类型传输。这是一个Web服务器配置问题，可以很容易地解决。

对于nginx，请将此内容与现有的types配置合并，通常在/etc/nginx目录中找到：

types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}

对于 Apache，将以下行添加到您的文档根目录中找到的 .htaccess 文件中：

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

- jchook

---

这不是什么大问题，但确实令人困惑。谢谢回答！ - fth

Answer 3

您可以忽略警告并考虑阅读以下主题的帖子：Proper MIME type for fonts。该主题还提到了以下内容：

“注意：由于没有为TrueType，OpenType和WOFF字体定义MIME类型，因此不考虑指定文件的MIME类型。”

来源：http://developer.mozilla.org/en/css/@font-face

- Domokun

Answer 4

如果您可以编辑 .htaccess 文件，您应该尝试添加。

addType font/ttf .ttf

否则，您可以使用svg/svgz字体代替

- fcalderan

Answer 5

如果您使用nodeJS运行服务器，这是一个很好的模块来映射您的mime类型。

https://github.com/broofa/node-mime

- Daan