awesome等图标在浏览器中的包容难点,开发笔记

百思不得其解,后来搜了一下以此问题,自个儿也在那计算一下,幸免1个坑掉下去一遍:

 

如下图所示:

 

查资料得知“谷歌(谷歌(Google))浏览器和IE9不协助对icon
font字体的跨域访问”,须求在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才得以。而且,经过验证,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并不得以,不清楚啥原因。此处@
晨 https://www.cnblogs.com/freshman0216/p/3825166.html
 作者的那篇文章也正是一个例子了啊,哈哈。

图片 1

图标突显万分!

图片 2

 

 

前天在写前端页面包车型地铁时候,觉得font-awesome简单实用就上手试了一下,因为font-awesome图标库甚为强大,笔者就在其css上多做了有的尝试,这一尝试发现了三个致命的题材,当本人对i标签进行统一字体大小以及联合字体样式的时候,发现了自家的网页在区别浏览器上的突显难点,呈现如下:

图片 3

图片 4

若是你们也境遇了这一个题目来说,借使项目必要对字体没有特殊需求的话就去掉啊!

因而本身在没有互连网管理员的动静下偷了个懒,干脆将自我自定义的i标签字体去除,难点取得了缓解!

 

 

 

图片 5

IE浏览器

IE浏览器

查资料得知“谷歌(谷歌)浏览器和IE9不扶助对icon
font字体的跨域访问”,要求在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才足以。而且,经过证实,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并不得以,不清楚啥原因。此处@
晨 https://www.cnblogs.com/freshman0216/p/3825166.html
 小编的这篇文章也就是3个例子了吧,哈哈。

假如你们也境遇了这些难点的话,假设项目供给对字体没有特殊供给的话就去掉啊!

图片 6

当今主流浏览器(包罗IE6)都帮衬CSS3的自定义字体(@font-face),由此得以尝试运用font来替换图片展现网站的各个icon。那样好处因为是矢量,放大不失真,体量小,缺点也很肯定,就是同样时刻字体只好是单色。固然您想利用font-awesome来开始展览图标的话,在设置其CSS样式时就要小心@font-face字体定义的题材了。

 

QQ浏览器:

图标展现寻常!

图片 7

 

 

百思不得其解,后来搜了眨眼之间间以此题材,本身也在那总计一下,幸免一个坑掉下去两回:

 

图标展现非常!

 

一般来说图所示:

图标展现格外

谷歌(谷歌)浏览器:

 

QQ浏览器:

 图片 8

 图片 9

图片 10

以后主流浏览器(包罗IE6)都帮忙CSS3的自定义字体(@font-face),由此可以尝尝运用font来替换图片体现网站的各样icon。那样好处因为是矢量,放大不失真,体积小,缺点也很显明,正是同一时半刻刻字体只好是单色。假若你想行使font-awesome来开始展览图标的话,在安装其CSS样式时就要小心@font-face字体定义的标题了。

谷歌(谷歌(Google))浏览器:

本来是浏览器的能源跨域请求难题

图标展现经常!

明天在写前端页面包车型大巴时候,觉得font-awesome简单实用就上手试了一晃,因为font-awesome图标库甚为强大,笔者就在其css上多做了有的品尝,这一品尝发现了1个沉重的标题,当小编对i标签进行联合字体大小以及联合字体样式的时候,发现了自己的网页在差别浏览器上的显得难点,展现如下:

     
功能完毕后,在QQ浏览器上展现卓绝的(左下图),但到了谷歌或IE或任何浏览器上海教室标字体却不出示了(右下图)。通过谷歌(谷歌)浏览器的控制台发现如下报错“
阻止交叉源请求:同源策略不容许读取 。

图标显示相当

 

     
功用达成后,在QQ浏览器上显示卓绝的(左下图),但到了谷歌或IE或任何浏览器上海体育场地标字体却不出示了(右下图)。通过谷歌浏览器的控制台发现如下报错“
阻止交叉源请求:同源策略不容许读取 。

本来是浏览器的能源跨域请求难题

为此小编在没有网络管理员的情事下偷了个懒,干脆将自小编自定义的i标签字体去除,难题获得了缓解!