OTF字体的正确MIME类型是什么?

264

在搜索网络时,我发现关于字体正确的MIME类型有很多不同的建议,但是我尝试过的每种MIME类型都无法解决Chrome浏览器的警告,如下所示:

资源被解释为字体,但使用的MIME类型是font/otf

这个字体是OTF格式的。

迄今为止,我尝试了以下这些MIME类型:

  • font/otf
  • application/font-otf
  • application/font
  • application/otf
  • application/octet-stream
  • application/x-font-otf
  • application/x-font-TrueType(我知道它不是TrueType,但一些来源引用它来表示OTF)

3
你实际上应该如何编写这个标题?我不太确定该怎么做。感谢你能提供的任何帮助。 - Josh Smith
1
@Josh:如果你是通过代码提供字体,你需要将“content-type”头设置为“font/opentype”(如果你使用的是OTF,就像我在问题中所述),但如果你只是指向一个物理字体文件,那么在Web服务器中设置MIME类型可能更容易。我不知道你使用的Web服务器是什么,所以请在Google上搜索yourserver + mime types或在SO上发布一个新问题来描述你的问题。 - David Hedlund
2
标题错误,应该是“如何在Chrome中消除‘资源被解释为字体’的警告”。 - djsadinoff
2
@djs:已授权!你知道,如果我能找到一种方法让Chrome记住我想要在控制台中列出日志消息和错误,但不是警告,那么我第一次就可能永远不会问这个问题了。 - David Hedlund
Chrome正在警告我们它正在执行我们要求的操作。如果您使用了.BMP文件并且成功地找到了用于字形的位图,我宁愿在那时看到一个警告! - cardiff space man
14个回答

218

在Apache和IIS服务器上,可以设置多种字体格式的MIME类型。我通常使用以下方式

svg   as "image/svg+xml"                  (W3C: August 2011)
ttf   as "application/x-font-ttf"         (IANA: March 2013)
      or "application/x-font-truetype"
otf   as "application/x-font-opentype"    (IANA: March 2013)
woff  as "application/font-woff"          (IANA: January 2013)
woff2 as "application/font-woff2"         (W3C W./E.Draft: May 2014/March 2016)
eot   as "application/vnd.ms-fontobject"  (IANA: December 2005)
sfnt  as "application/font-sfnt"          (IANA: March 2013) 

根据维护多用途Internet邮件扩展(MIME类型)初始文档的互联网工程任务组,这里是https://www.rfc-editor.org/rfc/rfc2045#section-5... 具体来说,它说:

"预计通过创建这些初始类型的新子类型可以通常实现对更大一组支持类型的添加。将来,更多顶级类型可能仅由此标准的标准跟踪扩展定义。如果出于任何原因要使用另一个顶级类型,则必须以“X-”开头命名以指示其非标准状态并避免与未来官方名称的潜在冲突。"

随着时间的推移,随着标准的创建和接受,会添加其他MIME类型,因此我们看到供应商特定的MIME类型,例如vnd.ms-fontobject等。

2013年8月16日更新: WOFF已于2013年1月3日正式在IANA注册Webkit于2013年3月5日更新,最新版本的浏览器将开始对使用旧的x-font-woff声明的服务器MIME类型发出警告。由于这些警告只是令人烦恼,我建议立即切换到已批准的MIME类型。在理想的情况下,这些警告会逐渐消失。

更新于2015年2月26日:WOFF2现已列入W3C编辑草案中,提议使用mime类型。根据最近的进展时间表,可能在接下来的一年内(可能在2016年底之前)提交给IANA。此外,SFNT是Google Web Fonts with their sfntly java library中骨干表参考中使用的可伸缩/样条容器字体格式,并已注册为IANA的mime类型,根据个人需求也可以将其添加到此列表中。

2017年10月4日更新:绝大多数现代浏览器都能够成功支持WOFF2格式(此处)。同时,我们可以遵循IETF的“字体”顶级媒体类型请求评论(RFC)跟踪器文档,以获取最新一组拟议字体类型的批准。

对于那些希望在CSS中以正确的顺序嵌入字体的人,请访问this article。但是,我已经尝试过以下顺序并获得了成功:

@font-face {
    font-family: 'my-web-font';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff2') format('woff2'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

对于Subversion自动属性,可以列出如下内容:
# Font formats
svg   = svn:mime-type=image/svg+xml
ttf   = svn:mime-type=application/x-font-ttf
otf   = svn:mime-type=application/x-font-opentype
woff  = svn:mime-type=application/font-woff
woff2 = svn:mime-type=application/font-woff2
eot   = svn:mime-type=application/vnd.ms-fontobject
sfnt  = svn:mime-type=application/font-sfnt

很好,谢谢。我在使用.woff时遇到了错误消息,但是在我的.htaccess文件中使用了这个代码后问题得到了解决。我使用了 AddType application/x-font-woff - Danny Englander
application/x-font-opentype和application/x-font-ttf在Linux Gnome Shell上运行得非常完美。 - Schmoove
4
TTF、OTF 和 WOFF2 已经过时。请参考 https://dev59.com/6XE85IYBdhLWcg3wPBB8#20723357。 - Jonas Berlin

144

建议使用 "font/opentype"。


我遇到了与上面问题相同的错误,但我不知道在哪里放置"MIME类型"为"font/opentype"... 这是应该放在HTML页面的头部吗? - Joe Hamilton
在IIS中,@ToniMichelCaubet,请进入您的网站,然后选择MIME类型模块。双击扩展名并相应更改即可。 - Adam
6
"font" 类型现在已经是官方的了。请访问 http://www.iana.org/assignments/media-types/media-types.xhtml#font。 - mems
我尝试了一下,但它不起作用,正如@dtech所提到的那样,application/x-font-opentype效果很好。我已经尝试过.otf字体文件。 - Shiko
https://dev59.com/6XE85IYBdhLWcg3wPBB8#20723357 现在是正确的答案,而 font/otf 是OpenType的正确MIME类型。另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face。 - Jason C
显示剩余3条评论

126

忽略Chrome的警告。OTF字体没有标准的MIME类型。

使用font/opentype可能会消除警告,但这并不意味着这是“正确”的做法。

可以说,最好自己定义一个MIME类型,例如“application/x-opentype”,因为至少“application”是一个已注册的内容类型,而“font”不是。

更新:OTF仍然存在问题,但WOFF在2013年1月获得了IANA MIME类型application/font-woff

更新2:OTF现在有了一个MIME类型:application/font-sfnt ,于2013年3月发布。此类型也适用于.ttf文件。


2
有趣。你有任何支持这个观点的参考资料吗? - Kzqai
18
没有 MIME 类型:"注意:由于没有为 TrueType、OpenType 和 WOFF 字体定义 MIME 类型,因此不考虑指定文件的 MIME 类型。" http://developer.mozilla.org/en/css/@font-face。不要编造新的顶级 MIME 类型,请使用 x- 代替:http://tools.ietf.org/html/rfc2045#section-5 – djsadinoff 3 分钟前编辑 - djsadinoff
我认为IANA优先于IETF。 IETF 向IANA提交草案,由于IANA报告woff是一种MIME类型,因此在其有限列表中覆盖了IETF。 - Mike Kormendy
如果您在OTF文件中使用“application/font-sfnt”,那么Google Chrome 37会抱怨:“资源被解释为字体,但使用MIME类型应用程序/ font-sfnt传输”。因此最好使用“font / otf”来处理OTF文件。 - Benny Code
我们又回到了起点。听起来 MIME 类型是正确的,警告是错误的。 - djsadinoff
显示剩余2条评论

105
自2017年2月起,RFC 8081将所有字体的MIME类型归为顶级媒体类型font。我最初发布的旧MIME类型现已被列为弃用。 IANA列出的字体类型现在包括:

其他非标准字体格式不做更改:


[过时的原始帖子]

由于网络上关于Web字体的MIME类型仍存在很多混淆,因此我想提供一个当前的答案,包括有效日期和支持IANA和W3C的链接。

这里是Web字体的官方MIME类型:

请注意,有一股力量正在将所有上述内容更改为 MIME 类型为 font/XXX,这得到了 W3C 在其 WOFF v2 提案中的支持。这一点正在由互联网工程任务组(IETF)在 字体顶级类型 下进行跟踪,并于 2017 年 2 月获得了 RFC 状态的批准(请参见 RFC 8081),因此它可能会发生变化!
顺便提一下,HTTP 响应可以 gzip(或以其他方式压缩)除 .woff.woff2 之外的所有上述字体格式,因为它们已经被严重压缩过了。
我在 MIME Types for Web Fonts with (Fantom) BedSheet 中详细介绍了更多内容。

@SteveEynon:基于Presto的Opera浏览器无法渲染使用图像MIME类型提供的SVG字体。 - user2284570
这与Mozilla列出的浏览器常见MIME类型一致。 - Serge Stroobandt

16
作为计算机中两个难点的一个具体实例,有趣的是看到自从这个问题最初发布以来,对这个问题的回答如何改变。值得庆幸的是,权力的掌握者已经把混乱带来了秩序。

今年二月份(2017年),W3C发布了RFC 8081:“字体”顶级媒体类型,大大简化了适用于字体文件的媒体类型:

本备忘录用于注册和记录“字体”顶级媒体类型,该类型下可以注册字体的表示格式子类型。此文档还作为一组预期子类型的注册申请,这些子类型代表了一些现有子类型的代表性,这些子类型已经在其单独注册中由“应用程序”树下的注册。

这是一份相当易读的文档,它描述了历史背景(缺乏“字体格式注册”)导致了混杂的媒体类型和子类型。随着可下载网络字体的(相对)最近的流行,W3C认识到需要一个“直观的顶级字体类型”。他们想出来的是……font

因此,自那时起,IANA已经更新了他们的官方媒体类型列表,其中包括他们目前认可的字体媒体类型及其所有子类型。
collection  font/collection
otf     font/otf
sfnt    font/sfnt
ttf     font/ttf
woff    font/woff
woff2   font/woff2

希望这是这个问题需要的最后一个答案。


2
Anthony,这是另一个很棒的资源,除了我的帖子之外。感谢你在这里分享! - Mike Kormendy

8

NGINX解决方案

文件

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

新增

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

删除

application/octet-stream        eot;

Ref

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


6

关于Apache 2.2虚拟主机和mod_mime的问题,经过在Debian Linux和OS X Leopard以及Snow Leopard上的测试,以下是我的建议:

如果您有一个虚拟主机配置,您将希望通过AddType指令添加类型,至少在配置底部添加如下内容:

....
   AddType font/opentype .otf
   AddType font/ttf .ttf
</VirtualHost>

已经进行了对Chrome Unstable/Trunk和Safari WebKit Nightly的测试,这消除了ttf和otf字体类型的mime octet-stream警告。

注意:当处理虚拟托管时,.htaccess没有任何影响。如果您正在为多个站点开发,则将使用虚拟托管开发,并且每个配置都需要这些AddType添加。


6

我刚刚在IANA官方列表上进行了一些研究。我认为这里给出的答案'font/xxx'是不正确的,因为在MIME标准中没有'font'类型。

根据RFC和IANA,截至2013年5月,以下是当前情况:

这三个是由IANA官方分配的:

  • svg 作为"image/svg+xml"
  • woff 作为"application/font-woff"
  • eot 作为"application/vnd.ms-fontobject"

这些未被官方分配,因此必须使用“x-”语法:

  • ttf 作为"application/x-font-ttf"
  • otf 作为"application/x-font-opentype"

application/font-woff可能是新的并且可能只是自2013年1月以来才官方存在。因此,“application/x-font-woff”在短期内可能更安全/更兼容。


5
自2013年3月起,IANA.ORG推荐在处理.otf时使用application/font-sfnt格式。
其他字体:
.eot  ->  application/vnd.ms-fontobject (as from December 2005)
.otf  ->  application/font-sfnt         (as from March 2013)
.svg  ->  image/svg+xml                 (as from August 2011)
.ttf  ->  application/font-sfnt         (as from March 2013)
.woff ->  application/font-woff         (as from January 2013)

See more...


2

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接