开发笔记 - 解决font-awesome等图标在浏览器中的兼

今天在写前端页面的时候,觉得font-awesome简单实用就上手试了一下,因为font-awesome图标库甚为强大,我就在其css上多做了一些尝试,这一尝试发现了一个致命的问题,当我对i标签进行统一字体大小以及统一字体样式的时候,发现了我的网页在不同浏览器上的显示问题,显示如下:

 

QQ浏览器:

图片 1

图标显示正常!

 

谷歌浏览器:

图片 2

图标显示异常!

 

IE浏览器

 图片 3

图标显示异常

 

百思不得其解,后来搜了一下这个问题,自己也在这总结一下,防止一个坑掉下去两次:

查资料得知“谷歌浏览器和IE9不支持对icon font字体的跨域访问”,需要在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才可以。而且,经过验证,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并不可以,不知道啥原因。此处@陈 晨 https://www.cnblogs.com/freshman0216/p/3825166.html 我的这篇文章相当于一个事例了吧,哈哈。

 

原来是浏览器的资源跨域请求问题

图片 4

现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。这样好处因为是矢量,放大不失真,体积小,缺点也很明显,就是同一时刻字体只能是单色。如果你想使用font-awesome来拓展图标的话,在设置其CSS样式时就要注意@font-face字体定义的问题了。

      功能实现后,在QQ浏览器上展示好好的(左下图),但到了谷歌或IE或其它浏览器上图标字体却不显示了(右下图)。通过谷歌浏览器的控制台发现如下报错“已 阻止交叉源请求:同源策略不允许读取 。

 

所以我在没有网络管理员的情况下偷了个懒,干脆将我自定义的i标签字体去除,问题得到了解决!

如下图所示:

图片 5

如果你们也遇到了这个问题的话,如果项目需求对字体没有特殊要求的话就去掉吧!

 

本文由金沙官网线上发布于Web前端,转载请注明出处:开发笔记 - 解决font-awesome等图标在浏览器中的兼

您可能还会对下面的文章感兴趣: