WOFF 字体的 Mime 类型？答案

【问题标题】：Mime type for WOFF fonts?WOFF 字体的 Mime 类型？
【发布时间】：2011-04-05 10:06:45
【问题描述】：

WOFF 字体应该用作什么 mime 类型？

我以font/truetype 提供truetype (ttf) 字体，以font/opentype 提供opentype (otf) 字体，但我找不到WOFF 字体的正确格式。

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

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

有人知道吗？

【问题讨论】：

所以没有办法阻止 Chrome 抱怨？
这里是 Node.js / Meteor 解决方案：npm install mime
还要注意另一个配置，它最终解决了我在 IIS *.com/questions/12458444/… 中的问题
font/woff 现在是 woff 的正确 MIME 类型，Chrome 不会抱怨。

标签： embedded-fonts woff

【解决方案1】：

@Nico，

目前还没有定义 woff 字体 mime 类型的标准。我使用字体交付 cdn 服务，它使用字体/woff，我在 chrome 中收到相同的警告。

参考：The Internet Assigned Numbers Authority

【讨论】：

【解决方案2】：

WOFF：

Web 开放字体格式
可以使用 TrueType 或 PostScript (CFF) 轮廓进行编译
目前受 FireFox 3.6+ 支持

尝试添加：

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

【讨论】：

【解决方案3】：

IIS 自动将 .ttf 定义为 application/octet-stream 似乎工作正常，fontshop 建议将 .woff 定义为 application/octet-stream

【讨论】：

【解决方案4】：

2017 年 6 月 22 日从 Keith Shaw's comment 更新：

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

font/woff

font/woff2

2011 年 1 月 it was announced 同时 Chromium 将识别

application/x-font-woff

作为 WOFF 的 mime 类型。我知道此更改现在处于 Chrome 测试版中，如果尚未稳定，它应该不会太远。

【讨论】：

从 Chromium 18.0, 2012/08/30 开始，需要使用 application/x-font-woff
正如 cc young 所说，为了摆脱 Chrome 警告“资源解释为字体但使用 MIME 类型 application/font-woff 传输”，您需要使用“application/x-font-woff "
Chrome 版本 24.0.1312.52 如果您使用 application/font-woff，似乎仍会回复“资源解释为字体但已传输...”。现在似乎仍然需要使用“application/x-font-woff”。
根据以下 Webkit 提交，font/woff 和 application/x-font-woff 将被删除以支持 application/font-woff。此外，警告已降级为日志消息。 trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/…
新的.woff2怎么样？

【解决方案5】：

它将是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 notes

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

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

【讨论】：

但正如 Marcel 之后指出的那样，Chromium 将根据 RFC 2048 识别 application/x-font-woff，直到 application/font-woff 被接受。
WOFF 规范现在是一个建议，不会从 application/font-woff w3.org/TR/WOFF/#appendix-b 改变

【解决方案6】：

注意：这个答案在当时是正确的，但在 2017 年 RFC 8081 发布时已经过时了

没有font MIME 类型！因此，font/xxx 总是错误的。

【讨论】：

@UmarFarooqKhawaja 这个答案不完整，但没有错。在这个答案和您的评论之间唯一改变的是application/font-woff 被添加到标准中，替换了application/x-font-woff 之类的东西（实际上软件更新是另一回事）。没有任何东西使 font/xxx 形式的 madey-uppey 内容类型有效。

【解决方案7】：

对我来说，下一个是在 .htaccess 文件中工作。

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

【讨论】：

我不敢相信更多的人没有发现这很有帮助。这是唯一对我有用的。
在提出这个问题时，'font/woff' 没有起作用。任何人都可以确认它现在可以吗？
在 IIS Express 中，您可以在 configuration/system.webServer/staticContent 下的 web.config 中添加 mimeMap 元素：<mimeMap fileExtension=".woff" mimeType="font/woff" />
从 Chrome 18 开始，停止工作。现在 application/x-font-woff 似乎可以工作了。
为了记录，谷歌字体使用font/woff和font/woff2。

【解决方案8】：

也许这会对某人有所帮助。我在 IIS 7 上看到 .ttf 已经是一种已知的 mime 类型。配置为：

application/octet-stream

所以我刚刚添加了所有 CSS 字体类型（.oet、.svg、.ttf、.woff），然后 IIS 开始为它们提供服务。 Chrome 开发工具也不会抱怨重新解释类型。

干杯，迈克尔

【讨论】：

'application/octet-stream' 相当于说“我不知道这是什么”。
是的，我知道。但关键是它有效，而许多更具体的选项似乎并没有导致在 IIS7 上使用字体。我的评论比试图成为最正确的评论更务实（因为那行不通）。

【解决方案9】：

为我做的事情是将它添加到我的 mime_types.rb 初始化程序中：

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

和清除缓存

rake tmp:cache:clear

在重新启动服务器之前。

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

【讨论】：

【解决方案10】：

Mime 类型可能不是您唯一的问题。如果字体文件托管在 S3 或其他域上，您可能还会遇到 Firefox 不会从不同域加载字体的问题。使用 Apache 很容易解决，但在 Nginx 中，我读到您可能需要将字体文件编码为 base-64 并将它们直接嵌入到字体 css 文件中。

【讨论】：

【解决方案11】：

将以下内容添加到您的 .htaccess 中

AddType font/woff woff

祝你好运

【讨论】：

【解决方案12】：

NGINX 解决方案

文件

/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

【讨论】：

【解决方案13】：

将字体 mime 类型添加到 .NET/IIS 的参考

通过 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 管理器

【讨论】：

【解决方案14】：

对于所有解决方案 index.php 都允许删除表单 url 和 woff 文件。在 .htaccess 文件中写入以下代码，并对您的 application/config/config.php 文件进行此更改： $config['index_page'] = '';

仅适用于 Linux 托管服务器。 .htaccess 文件详情

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php
</IfModule>

【讨论】：

【解决方案15】：

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

font/woff
font/woff2

【讨论】：

【解决方案16】：

我知道这篇文章有点老了，但是在花了很多时间试图让字体在我的 nginx 本地机器上工作并尝试了大量的解决方案之后，我终于找到了一个对我有用的解决方案。

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

在括号内，您可以放置字体的扩展名，或者通常是您要加载的文件。例如，我也将它用于字体和图像（png、jpg 等），所以不要混淆这个解决方案仅适用于字体。

只需将其放入您的 nginx 配置文件，重新启动，我希望它也适用于您！

【讨论】：

【解决方案17】：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

这是一个有用的 mimetype 列表

【讨论】：