Mime类型的WOFF字体?

WOFF字体应该作为什么mime类型?

我正在服务truetype (ttf)字体作为font/truetype和opentype (otf)作为font/opentype，但我找不到WOFF字体的正确格式。

我已经尝试了font/woff， font/webopen和font/webopentype，但Chrome仍然抱怨:

资源解释为字体，但使用MIME类型应用程序/字节流传输。

有人知道吗?

351794 次浏览
小开

# EYZ0,

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

参考:# EYZ0

小开

WOFF:

  1. 网页开放字体格式
  2. 它可以用TrueType或PostScript (CFF)概要进行编译
  3. 目前FireFox 3.6+支持它

试着补充一下:

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

IIS自动将.ttf定义为应用程序/octet-stream，这似乎工作正常，而fontshop建议将.woff定义为应用程序/octet-stream

小开
最佳答案

更新自Keith Shaw的评论 on june 22, 2017:

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

# EYZ0

# EYZ0

在2011年1月它被宣布，同时铬将承认

# EYZ0

作为《WOFF》的模版我知道这个改变现在是在Chrome测试版，如果还不稳定，它应该不会太远。

小开

它将是application/font-woff。

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

和# EYZ0

来自Mozilla css字体面注释

在Gecko中，web字体受到相同的域限制(字体文件必须与使用它们的页面在相同的域上)，除非使用HTTP访问控制来放松这一限制。 注意:因为没有为TrueType, OpenType和WOFF字体定义MIME类型，所以指定的文件的MIME类型不被考虑

来源:# EYZ0

小开

注:这个答案在当时是正确的，但在2017年当RFC 8081发布时，这个答案就过时了

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

小开

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

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

也许这能帮到别人。我看到iis7 .ttf已经是一个已知的mime类型。它被配置为:

application/octet-stream

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

< p >欢呼, 迈克尔。< / p >
小开

为我做的事情是将这个添加到我的mime_types中。rb初始化:

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

清除缓存

rake tmp:cache:clear

在重新启动服务器之前。

来源:# EYZ0

小开

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

小开

将以下内容添加到.htaccess中

AddType font/woff woff

祝你好运

小开

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

感谢迈克·富尔彻

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

小开

向.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管理器

截图of adding woff mime types to IIS

小开

对于所有解决方案索引.php删除表单url和woff文件允许。为了在.htaccess文件中编写以下代码，并对应用程序/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>
小开

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

font/woff
font/woff2
小开

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

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

在圆括号内，您可以放置字体的扩展名或您想要加载的文件。例如，我将它用于字体和图像(png,jpg等)，所以不要感到困惑，这个解决方案只适用于字体。

只要把它放入你的nginx配置文件，重新启动，我希望它也适用于你!

小开

# EYZ0

这是一个有用的mime类型列表


提交答案