那一品尝开掘了一个沉重的标题,那壹尝试发掘了一个致命的难点

后天在写前端页面的时候,认为font-awesome轻巧实用就上手试了一下,因为font-awesomeLogo库甚为强大,作者就在其css上多做了有个别尝试,那1尝试发掘了贰个致命的主题素材,当自个儿对i标签举办合并字体大小以及联合字体样式的时候,发掘了自家的网页在区别浏览器上的显示难题,展现如下:

今日在写前端页面的时候,感到font-awesome轻易实用就上手试了1晃,因为font-awesomeLogo库甚为强大,小编就在其css上多做了部分品尝,那壹品尝发掘了三个沉重的标题,当笔者对i标签进行联合字体大小以及联合字体样式的时候,发掘了自个儿的网页在分化浏览器上的显得难题,彰显如下:

 

 

QQ浏览器:

QQ浏览器:

图片 1

图片 2

Logo突显平常!

Logo展现平日!

 

 

谷歌(谷歌)浏览器:

谷歌浏览器:

图片 3

图片 4

图标展现格外!

Logo展现非凡!

 

 

IE浏览器

IE浏览器

 图片 5

 图片 6

Logo展现分外

图标突显格外

 

 

百思不得其解,后来搜了一下以此主题素材,本身也在那计算一下,幸免三个坑掉下去四回:

百思不得其解,后来搜了一下这些难点,本身也在那总结一下,防止1个坑掉下去五回:

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

查资料得知“谷歌(Google)浏览器和IE玖不辅助对icon
font字体的跨域访问”,供给在Logo字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才足以。而且,经过证实,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并无法,不清楚啥原因。此处@
晨 https://www.cnblogs.com/freshman0216/p/3825166.html
 作者的那篇小说相当于二个例子了吧,哈哈。

 

 

本来是浏览器的财富跨域请求难题

原本是浏览器的能源跨域请求难点

图片 7

图片 8

当今主流浏览器(蕴含IE陆)都扶助CSS叁的自定义字体(@font-face),因此得以品味选择font来替换图片展现网址的各样icon。那样好处因为是矢量,放大不失真,体量小,缺点也很肯定,正是一样时刻字体只好是单色。假如你想使用font-awesome来进展Logo的话,在设置其CSS样式时将在小心@font-face字体定义的主题素材了。

后天主流浏览器(包罗IE6)都支持CSS三的自定义字体(@font-face),因而得以品味使用font来替换图片突显网址的各个icon。那样好处因为是矢量,放大不失真,体积小,缺点也很料定,就是同一时半刻刻字体只好是单色。假使您想利用font-awesome来张开Logo的话,在安装其CSS样式时将在专注@font-face字体定义的题目了。

     
功能落成后,在QQ浏览器上突显出色的(左下图),但到了谷歌(Google)或IE或其余浏览器上海体育场所标字体却不出示了(右下图)。通过谷歌(Google)浏览器的调控台开采如下报错“
阻止交叉源请求:同源攻略不允许读取 。

     
成效实现后,在QQ浏览器上海展览中心示卓绝的(左下图),但到了谷歌或IE或任何浏览器上海教室标字体却不彰显了(右下图)。通过谷歌(Google)浏览器的调整台开掘如下报错“
阻止交叉源请求:同源计策不容许读取 。

 

 

于是作者在一直不互联网管理员的事态下偷了个懒,干脆将自己自定义的i标签名体去除,难题得到了消除!

因此本人在平昔不网络管理员的场馆下偷了个懒,干脆将自己自定义的i标签名体去除,难题赚取了缓慢解决!

一般来说图所示:

如下图所示:

图片 9

图片 10

假诺你们也际遇了那些主题素材来讲,要是项目需求对字体没有特殊须求的话就去掉吧!

假定你们也碰着了那几个标题标话,固然项目供给对字体没有特殊必要的话就去掉啊!

 

 

相关文章