引用字体时图标无法显示_字体文件不存在问题

最近一个项目，CSS和JS静态资源部署到CDN后，浏览网站时发现Font Awesome字体图标全部无法正常显示，只显示一些奇怪的符号。浏览器控制台报错：font-face引用字体跨域。

使用CDN后字体图片不显示问题

1. 先检查字体文件路径，发现它和URL路径都是HTTPS协议，而且二级域名也完全一致。这就奇怪了——同源同协议，怎么还会报字体跨域？

跨域：当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

2. 突然想起来，CSS已经做了CDN部署，但字体文件（.eot、.woff、.woff2）并没有加入CDN缓存。于是赶紧把字体文件格式也加到CDN配置里。

3. 强制刷新网页后，发现还是不行，但控制台报错信息变了——这次提示“字体文件不存在”。试着复制字体文件到本地，发现也无法打开。

IIS中字体文件不存在问题

浏览器里提示字体文件无法打开，但服务器上文件确实存在。问题出在服务器不认识这种文件类型——需要手动添加MIME类型。

IIS添加MIME类型

.woff2 application/x-font-woff

nginx

location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {add_header Access-Control-Allow-Origin *;}AddType application/x-font-woff woffAddType application/x-font-woff2 woff2

Apache

location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {add_header Access-Control-Allow-Origin *;}AddType application/x-font-woff woffAddType application/x-font-woff2 woff2