51dev.com IT技术开发者社区

51dev.com 技术开发者社区

配置nginx支持font awesome图标字体

其他互联网报道阅读(1236)2017-05-21 收藏0次评论

ont awesome是专为Bootstrap而创造的图标字体,因其通过字体库实现了大多数常用的图标而闻名。

按照Font Awesome的官方文档引入相关css和tff等字体文件之后,结果所有的图标都是乱码。查看网络请求,是有相关tff和woff文件的请求,就是图标不显示。

首先怀疑的是响应头的内容类型(Content-Type),对比查看一下,果然不对,正常的应该是application/x-font-ttf或font/x-woff等格式,这说明问题之一就是响应头。

找到nginx的mime配置文件,果然是没有字体相关的匹配,于是添加以下代码

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

字体的响应头对了,可还是乱码,马上怀疑是不是跨域问题。查找资料发现果然是跨域问题,在firefox由于访问控制而引起跨域,而在chrome下正常。于是添加可以接收来自任意源的请求,在nginx中配置如下:

if ($request_filename ~* ^.*?/([^/]*?)$){
    set $filename $1;
}
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

再次访问,可爱的图标出现了!

以上就是配置nginx支持font awesome图标字体的全部内容,请多关注【51DEV】IT技术开发者社区。

相关内容