最近一个项目，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 |
发表于 2023-6-3 11:45:16