程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → CSS/HTML → 经验交流 → 字体图标无法显示

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

 更新时间：2023年06月03日 11:45:16   投稿：yin  
最近一个项目，css,js等静态资源做了cdn部署，浏览网站时发现font?awesome字体图标通通不能正常显示。只有一些奇怪的符号。浏览器控制台报错信息：font-face引用字体跨域。
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

最近一个项目，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

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

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com