WOFF字体的Mime类型？

时间：2010-08-29 12:56:39

标签： embedded-fonts woff

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

我将truetype（ttf）字体提供为font/truetype，将opentype（otf）提供为font/opentype，但我找不到正确的WOFF字体格式。

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

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

有人知道吗？

18 个答案:

答案 0 :(得分：721)

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的哑剧类型。我知道这个变化现在已经在Chrome测试版中，如果还没有稳定，那么它应该不会太远。

答案 1 :(得分：130)

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

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

答案 2 :(得分：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 notes

  

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

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

答案 3 :(得分：23)

将字体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="application/font-woff" />
     <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer>

通过IIS管理器

screenshot of adding woff mime types to IIS

答案 4 :(得分：21)

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://tools.ietf.org/html/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

答案 5 :(得分：17)

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

font/woff
font/woff2

答案 6 :(得分：12)

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

答案 7 :(得分：6)

<强> @Nico ，

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

参考：The Internet Assigned Numbers Authority

答案 8 :(得分：5)

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

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

和清除缓存

rake tmp:cache:clear

重启服务器之前。

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

答案 9 :(得分：4)

将以下内容添加到.htaccess 

AddType font/woff woff
祝你好运

答案 10 :(得分：3)

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

application/octet-stream

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

干杯， 迈克尔

答案 11 :(得分：2)

WOFF：

  1. 网络开放字体格式
  2. 可以使用TrueType或PostScript（CFF）轮廓编译
  3. 目前支持FireFox 3.6 +

    4. 尝试添加：

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

答案 12 :(得分：1)

对于所有解决方案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>

答案 13 :(得分：1)

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

答案 14 :(得分：1)

我知道这篇文章有点陈旧，但是花了很多时间尝试使字体在我的nginx本地计算机上工作，并尝试了很多解决方案后，我终于找到了一个对我有用的解决方案。

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

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

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

答案 15 :(得分：1)

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

这是一个有用的mimetypes列表

答案 16 :(得分：0)

Mime类型可能不是您唯一的问题。如果字体文件托管在S3或其他域上，您可能还会遇到Firefox不会从不同域加载字体的问题。这是Apache的一个简单修复，但是在Nginx中，我读过你可能需要在base-64中编码你的字体文件并将它们直接嵌入到你的字体css文件中。

答案 17 :(得分：0)

我遇到了同样的问题， font / opentype 为我工作

相关问题
最新问题