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

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

 

QQ浏览器：

图标显示正常！

 

谷歌浏览器：

图标显示异常！

 

IE浏览器

 

图标显示异常

 

百思不得其解，后来搜了一下这个问题，本身也在这总结一下，防止一个坑掉下去两次：

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

 

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

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

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

 

因此我在没有网络管理员的状况下偷了个懒，干脆将我自定义的i标签字体去除，问题获得了解决！

以下图所示：

若是大家也遇到了这个问题的话，若是项目需求对字体没有特殊要求的话就去掉吧！