为了在前端正确地显示字体,浏览器必须使用正确的http header来接受字体文件。若是服务器没有设置要求的头信息,那么有些浏览器就会在控制台报错或者直接不能显示。css
可能你的服务器已经配置好了,你无须再动任何东西。若是没有配置好,那么你须要注意下面几点:html
- 首先,修改mime-type headers;
- 其次设置CORS headers-仅当你从不一样域下获取字体文件或者html页面的时候。(*注意:若是你没有设置CORS headers信息,你能够直接把字体文件(路径)嵌入到CSS样式中。若是你去fontello网站下载到本地的话fontello.css中就已经这样作好了)
下面介绍两大主流服务器的字体支持配置:前端
Apache
设置正确的mime-type来支持字体文件,将下面的设置加入到服务器配置文件中:浏览器
AddType application/font-sfnt otf ttf AddType application/font-woff woff AddType application/font-woff2 woff2 AddType application/vnd.ms-fontobject eot
若是你不能修改配置文件,那么就在你的项目下新建一个*.htaccess文件,添加下面的设置:服务器
设置CORS headers 信息:markdown
<FilesMatch ".(eot|ttf|otf|woff|woff2)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
Nginx
Nginx服务器默认是没有支持字体的mime-type设置的,而且对.eot文件的mime-type也是不正确的。在配置文件夹下找到mime-type设置的地方。一般,在mimes.types文件下。
搜索.eot,并在下它的设置下添加下面几行:app
application/font-sfnt otf ttf; application/font-woff woff; application/font-woff2 woff2; application/vnd.ms-fontobject eot;
对于CORS headers 信息设置,添加下面的几行到你的vhost配置中:字体
location ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; }