最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
引用字体时图标无法显示_字体文件不存在问题
时间：2026-09-15 16:10:02 编辑：袖梨 来源：一聚教程网
最近一个项目，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 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
到此这篇关于引用字体时图标无法显示_字体文件不存在问题的文章就介绍到这了,更多相关字体图标无法显示内容请搜索一聚教程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持一聚教程网！
相关文章
- 使用css实现全兼容tooltip提示框 09-15
- 使用css实现全兼容浏览器的三角形 09-15
- 详细分析css float 属性以及positionabsolute 的区别 09-15
- 从零学CSS系列之文本属性 09-15
- 深入理解zindex的工作原理和应用技巧 09-15
- 网页中img图片使用css实现等比例自动缩放不变形（代码已测试） 09-15