为什么在网站所在服务器上设置woff的meta类型

刚开始使用Glyphicons图标的时候，网站在本地电脑上运行是显示正常的，结果网站一发布到服务器上图标就显示不出来。

查看网站对Glyphicons图标的HTTP请求，发现请求的资源竟然是404错误，但是服务器上明明有Glyphicons Font的文件。

后来经过排查，原来是服务器上并没有设置woff的meta类型。导致HTTP请求无法识别woff类型的字体，而Glyphicons字体图标正好是woff类型的字体。

Nginx服务器默认是没有支持字体的mime-type设置的，并且对.eot文件的mime-type也是不正确的。在配置文件夹下找到mime-type设置的地方。通常，在mimes.types文件下。

搜索.eot，并在下它的设置下添加下面几行：

application/font-sfntotf ttf

application/font-woffwoff

application/font-woff2 woff2

application/vnd.ms-fontobjecteot

对于CORS headers 信息设置，添加下面的几行到你的vhost配置中：

location ~* \.(eot|otf|ttf|woff|woff2)$ {

add_header Access-Control-Allow-Origin *

}

woff的意思是：开放字体格式；字体格式；字体；尔夫；字体文件；开放字型格式；字体格局。

Web开放字体格式（Web Open Font Format，简称WOFF）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由万维网联盟的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密也不受DRM（数位著作权管理）限制。

WOFF本质上是包含了基于sfnt的字体（如TrueType、OpenType或开放字体格式），且这些字体均经过WOFF的编码工具压缩，以便嵌入网页中。这个字体格式使用zlib压缩，文件大小一般比TTF小40%。

WOFF得到许多主要字体制造公司的支持，并且已经为Mozilla Firefox3.6版所支持。微软自第三个platform review版本的Internet Explorer 9起，就对WOFF添加了全部的支持。WebKit浏览器支持WOFF，Safari自5.1起支持WOFF，Google Chrome则自6.0起就支持WOFF。Presto自2.7.81起支持WOFF。

---