最近一个项目，css,js等静态资源做了cdn部署，浏览网站时发现font awesome字体图标通通不能正常显示。只有一些奇怪的符号。浏览器控制台报错信息：font-face引用字体跨域。

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

1. 查看字体文件路径，跟URL路径是相同的HTTPS，而且都是相同的二级域名，这就奇怪了，怎么会报错字体跨域呢。

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

2.  突然想起css做了cdn部署，而字体css文件的文件格式.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 woff
AddType application/x-font-woff2 woff2

Apache

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

到此这篇关于引用字体时图标无法显示_字体文件不存在问题的文章就介绍到这了,更多相关字体图标无法显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！