察觉了自家的网页在分歧浏览器上的来得难点,发现了自己的网页在不一致浏览器上的体现难点

明日在写前端页面包车型大巴时候,觉得font-awesome简单实用就上手试了弹指间,因为font-awesome图标库甚为强大,作者就在其css上多做了一部分尝试,这一尝试发现了三个致命的题材,当本人对i标签进行统一字体大小以及联合字体样式的时候,发现了自个儿的网页在分歧浏览器上的呈现难点,呈现如下:

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

 

 

QQ浏览器:

QQ浏览器:

公海赌船710 1

公海赌船710 2

图标呈现平常!

图标展现平常!

 

 

谷歌(谷歌)浏览器:

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

公海赌船710 3

公海赌船710 4

图标呈现十分!

图标展现非常!

 

 

IE浏览器

IE浏览器

 公海赌船710 5

 公海赌船710 6

图标展现相当

图标展现分外

 

 

百思不得其解,后来搜了弹指间以此难点,自个儿也在那总括一下,制止三个坑掉下去两回:

百思不得其解,后来搜了一下以此题材,自个儿也在那总括一下,幸免三个坑掉下去一回:

查资料得知“谷歌(谷歌(Google))浏览器和IE9不援助对icon
font字体的跨域访问”,需要在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才方可。而且,经过证实,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并不可能,不晓得吗原因。此处@
晨 https://www.cnblogs.com/freshman0216/p/3825166.html
 作者的那篇小说约等于三个事例了呢,哈哈。

查资料得知“谷歌(Google)浏览器和IE9不援救对icon
font字体的跨域访问”,要求在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才能够。而且,经过验证,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并不得以,不明了啥原因。此处@
晨 https://www.cnblogs.com/freshman0216/p/3825166.html
 小编的那篇小说约等于多少个例子了呢,哈哈。

 

 

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

公海赌船710,原本是浏览器的能源跨域请求难题

公海赌船710 7

公海赌船710 8

当今主流浏览器(包罗IE6)都援助CSS3的自定义字体(@font-face),由此得以品味接纳font来替换图片突显网站的各样icon。那样好处因为是矢量,放大不失真,体积小,缺点也很显明,就是平等时刻字体只可以是单色。假设你想行使font-awesome来拓展图标的话,在装置其CSS样式时就要注意@font-face字体定义的难点了。

今昔主流浏览器(包括IE6)都扶助CSS3的自定义字体(@font-face),因此能够品尝选取font来替换图片呈现网站的各样icon。那样好处因为是矢量,放大不失真,容积小,缺点也很分明,就是同临时刻字体只好是单色。固然你想利用font-awesome来拓展图标的话,在安装其CSS样式时就要注意@font-face字体定义的标题了。

     
效率达成后,在QQ浏览器上显得完美的(左下图),但到了谷歌(Google)或IE或其余浏览器上航海用教室标字体却不展现了(右下图)。通过谷歌(Google)浏览器的控制台发现如下报错“
阻止交叉源请求:同源策略不允许读取 。

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

 

 

据此自个儿在并未互连网管理员的景况下偷了个懒,干脆将本身自定义的i标签字体去除,难题取得了消除!

所以作者在并未网络管理员的景况下偷了个懒,干脆将自家自定义的i标签字体去除,难点获得了消除!

正如图所示:

如下图所示:

公海赌船710 9

公海赌船710 10

若果你们也赶上了那么些题指标话,借使项目须要对字体没有特殊须要的话就去掉吧!

设若你们也境遇了这么些题材来说,假如项目要求对字体没有特殊须要的话就去掉啊!