为了在前端正确地显示字体,浏览器必须使用正确的http header来接受字体文件。如果服务器没有设置要求的头信息,那么有些浏览器就会在控制台报错或者直接不能显示。
可能你的服务器已经配置好了,你无须再动任何东西。如果没有配置好,那么你需要注意下面几点:
下面介绍两大主流服务器的字体支持配置:
设置正确的mime-type来支持字体文件,将下面的设置加入到服务器配置文件中:
1 2 3 4 |
AddType <span class="hljs-type">application</span>/font-sfnt otf ttf AddType <span class="hljs-type">application</span>/font-woff woff AddType <span class="hljs-type">application</span>/font-woff2 woff2 AddType <span class="hljs-type">application</span>/vnd.ms-fontobject eot |
如果你不能修改配置文件,那么就在你的项目下新建一个*.htaccess文件,添加下面的设置:
设置CORS headers 信息:
1 2 3 |
<span class="hljs-subst"><</span>FilesMatch <span class="hljs-string">".(eot|ttf|otf|woff|woff2)"</span><span class="hljs-subst">></span> <span class="hljs-keyword">Header</span> <span class="hljs-built_in">set</span> Access<span class="hljs-attribute">-Control</span><span class="hljs-attribute">-Allow</span><span class="hljs-attribute">-Origin</span> <span class="hljs-string">"*"</span> <span class="hljs-subst"><</span>/FilesMatch<span class="hljs-subst">></span> |
Nginx服务器默认是没有支持字体的mime-type设置的,并且对.eot文件的mime-type也是不正确的。在配置文件夹下找到mime-type设置的地方。通常,在mimes.types文件下。
搜索.eot,并在下它的设置下添加下面几行:
1 2 3 4 |
<span class="hljs-type">application</span>/font-sfnt otf ttf; <span class="hljs-type">application</span>/font-woff woff; <span class="hljs-type">application</span>/font-woff2 woff2; <span class="hljs-type">application</span>/vnd.ms-fontobject eot; |
对于CORS headers 信息设置,添加下面的几行到你的vhost配置中:
1 2 3 4 |
location ~<span class="hljs-subst">*</span> <span class="hljs-subst">\</span><span class="hljs-built_in">.</span>(eot<span class="hljs-subst">|</span>otf<span class="hljs-subst">|</span>ttf<span class="hljs-subst">|</span>woff<span class="hljs-subst">|</span>woff2)$ { add_header Access<span class="hljs-attribute">-Control</span><span class="hljs-attribute">-Allow</span><span class="hljs-attribute">-Origin</span> <span class="hljs-subst">*</span>; } |