WOFF字体的MIME类型是什么？

Question

WOFF字体的MIME类型是什么？

embedded-fontswoff

578

WOFF字体应该以什么样的mime类型提供？

我正在将TrueType（ttf）字体作为font/truetype和OpenType（otf）作为font/opentype提供，但我找不到适用于WOFF字体的正确格式。

我尝试过font/woff、font/webopen和font/webopentype，但Chrome仍然抱怨：

"Resource interpreted as font but transferred with MIME type application/octet-stream."

有人知道吗？

- Nico Burns

1

那么没有办法停止Chrome的抱怨吗？ - John Mee

1

这是Node.js / Meteor的解决方案：npm install mime - Eric Leroy

还要注意最后解决我的问题的其他配置，位于IIS上。https://dev59.com/12cs5IYBdhLWcg3w84Zo - Iman

1

"font/woff" 现在是 woff 的正确 MIME 类型，Chrome 不会再报错了。 - Mikael Dúi Bolinder

17个回答

148

对我来说，在 .htaccess 文件中，下面的内容可以起作用。

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2

- joiggama

2

我无法相信更多的人没有发现这个有用。这是唯一一个对我有效的。 - Tim Joyce

4

请问现在'font/woff'格式是否可用？在提问时它是无法使用的。请仅回答问题，不要添加任何额外的解释或信息。 - Nico Burns

5

在IIS Express中，您可以在configuration/system.webServer/staticContent下的web.config文件中添加一个mimeMap元素：<mimeMap fileExtension=".woff" mimeType="font/woff" />，用于指定.woff文件的MIME类型为font/woff。 - shovavnik

6

自Chrome 18版本起，停止工作。现在似乎application/x-font-woff可以使用。 - cc young

4

记录一下，Google Fonts 使用 font/woff 和 font/woff2 格式。 - DisgruntledGoat

显示剩余3条评论

56

它将是application/font-woff格式。

参见http://www.w3.org/TR/WOFF/#appendix-b（W3C候选推荐，2011年8月4日）

和http://www.w3.org/2002/06/registering-mediatype.html

来自Mozilla css font-face的注释

在Gecko中，Web字体受到相同的域限制（字体文件必须与使用它们的页面位于同一域中），除非使用HTTP访问控件放松此限制。注意：由于TrueType、OpenType和WOFF字体没有定义的MIME类型，因此不考虑指定文件的MIME类型。

来源：https://developer.mozilla.org/en/CSS/@font-face#Notes

- jflaflamme

3

但是像Marcel所指出的那样，直到application/font-woff被接受之前，Chromium将按照RFC 2048识别application/x-font-woff。 - jflaflamme

2

WOFF规范现已成为推荐标准，并且不会从application/font-woff发生变化。http://www.w3.org/TR/WOFF/#appendix-b - Steve Workman

31

.NET/IIS添加字体MIME类型的参考

通过web.config文件

<system.webServer>
  <staticContent>
     <!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
     <remove fileExtension=".woff" />
     <remove fileExtension=".woff2" />
     <mimeMap fileExtension=".woff" mimeType="font/woff" />
     <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

通过IIS管理器

向IIS添加woff文件的MIME类型的截图

- JeremyWeir

25

NGINX解决方案

file

/etc/nginx/mime.types

或者

/usr/local/nginx/conf/mime.types

添加

font/ttf                      ttf;
font/opentype                 otf;
font/woff                     woff;
font/woff2                    woff2;
application/vnd.ms-fontobject eot;

删除

application/octet-stream        eot;

参考文献

RFC @02.2017

https://www.rfc-editor.org/rfc/rfc8081#page-15

https://www.iana.org/assignments/media-types/media-types.xhtml

感谢Mike Fulcher

http://drawingablank.me/blog/font-mime-types-in-nginx.html

- Bruno

23

截至2017年2月，RFC8081是建议标准。它定义了字体的顶级媒体类型，因此WOFF和WOFF2的标准媒体类型如下所示：

font/woff
font/woff2

- Keith Shaw

11

注意：本答案在发布时是正确的，但随着RFC 8081于2017年发布，已经过时。

并不存在font MIME类型！因此，font/xxx始终是错误的。

- K. Rice

@UmarFarooqKhawaja 这个答案不完整，但也不是错的。这个答案和你的评论之间唯一改变的是 application/font-woff 被添加到标准中，取代了 application/x-font-woff 等内容（实际软件更新是另一回事）。没有任何东西使得 font/xxx 形式的虚构内容类型合法。 - Jon Hanna

6

将以下内容添加到你的 .htaccess 文件中。

AddType font/woff woff

祝你好运

- Nick321

5

对我有用的方法是将以下内容添加到我的mime_types.rb初始化文件中：

Rack::Mime::MIME_TYPES['.woff'] = 'font/woff'

并清除缓存

rake tmp:cache:clear

在重新启动服务器之前。

来源：https://github.com/sstephenson/sprockets/issues/366#issuecomment-9085509

- Stewie

4

@Nico,

目前还没有针对woff字体的mime类型的定义标准。我使用字体传送cdn服务，它使用font/woff，我在chrome中会得到相同的警告。

参考: 互联网数字分配机构

- Chris_O

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcel · Accepted Answer

来自Keith Shaw在2017年6月22日的评论更新：

截至2017年2月，RFC8081是建议标准，它为字体定义了顶级媒体类型，因此WOFF和WOFF2的标准媒体类型如下：

font/woff

font/woff2

2011年1月，宣布Chromium在此期间将识别

application/x-font-woff

作为WOFF的MIME类型。我知道这个改变现在已经在Chrome beta中了，如果还没有在稳定版中，则应该不会太远。