开发笔记 - 解决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标签字体去除,问题得到了解决!
如下图所示:
如果你们也遇到了这个问题的话,如果项目需求对字体没有特殊要求的话就去掉吧!
开发笔记 - 解决font-awesome等图标在浏览器中的兼容问题的更多相关文章
- Hi3516开发笔记(十):Qt从VPSS中获取通道图像数据存储为jpg文件
前言 上一篇已经将himpp套入qt的基础上进行开发.那么qt中拿到frame则是很关键的交互,这是qt与海思可能编解码交叉开发的关键步骤. 受限制 因为直接配置sample的vi比较麻烦 ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题
我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...
- .Net开发笔记(二十一) 反射在.net中的应用
反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...
- stm32开发笔记一:使用固件库在RealView-MDK中新建工程(上)
很久没有碰单片机了,两年了吧,因为项目需要,最近入手一块红牛的开发板,核心为STM32F103ZE.虽然以前做过大概半年的stm32的开发,现在天天在.net平台下写代码,已经忘记的差不多,恰逢周末, ...
- 解决backgroud:transparent在低版本浏览器中的bug
今天在html页面上定义了一个button和一个div,大小相同,button使用绝对定位,覆盖在div上面一层,同时样式设置背景透明(background:transparent). 这样就可以在看 ...
- 【转】Android开发笔记(序)写在前面的目录
原文:http://blog.csdn.net/aqi00/article/details/50012511 知识点分类 一方面写写自己走过的弯路掉进去的坑,避免以后再犯:另一方面希望通过分享自己的经 ...
- Jx.Cms开发笔记(六)-重写Compiler
我们在Jx.Cms开发笔记(三)-Views主题动态切换中说了如何切换主题.但是这里有一个问题,就是主题切换时,会报错 这是由于asp.net core在处理Views的信息的时候是在构造函数中处理的 ...
- Java开发笔记(十三)利用关系运算符比较大小
前面在<Java开发笔记(九)赋值运算符及其演化>中提到,Java编程中的等号“=”表示赋值操作,并非数学上的等式涵义.Java通过等式符号“==”表示左右两边相等,对应数学的等号“=”: ...
随机推荐
- Oracle10G各版本下载以及补丁地址
Oracle Database 10g Release 2 (10.2.0.1.0) Enterprise/Standard Edition for Microsoft Windows (32-bit ...
- bzoj2748音量调节——背包
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2748 怎么会有这样的省选题... 代码如下: #include<iostream> ...
- Android Studio手动下载配置Gradle的方法
1 问题 (1) android sutdio第一次打开一个工程巨慢怎么办? (2) 手动配置Gradle Home为什么总是无效? (3) 明明已经下载了Gradle,配置了gradle home, ...
- ubuntu设置里面怎么少了好多设置了比如桌面背景
哈哈 我也是醉了 这个虚拟机真的不好对付 解决办法:sudo apt-get install unity-control-center ok!
- 20170412-sl
force n实力,武力 v强迫 ---------------20170413-sl----------------------- discard n/v 放弃 fetch n/v 拿,取 pu ...
- bzoj4517[Sdoi2016]排列计数(组合数,错排)
4517: [Sdoi2016]排列计数 Time Limit: 60 Sec Memory Limit: 128 MBSubmit: 1792 Solved: 1111[Submit][Stat ...
- (一)搭建自己的SpringBoot后台框架整合MyBatis
一:通过idea工具构建基础框架 1. 打开idea,左上角File→New→Project, 2. 点击Next 3. 点击Next,配置如下图,这里我们选择数据库MySQL和持久层框架MyB ...
- js同过url下载文件,调用另存为弹框
实战中,项目将文件上传到项目的根目录下,并进行保存,随后根据此文件的路径进行下载到本地磁盘 实战中,项目将文件上传到项目的根目录下,并进行保存,随后根据此文件的路径进行下载到本地磁盘 实战中,项目将文 ...
- java final static 和final区别
static 和非static 之间的差异,只有当值在运行期间初始化的前提下,这种差异才会揭示出来.因为编译期间的值被编译器认为是相 同的. package thinking; public clas ...
- scikit-learning教程(三)使用文本数据
使用文本数据 本指南的目标是探讨scikit-learn 一个实际任务中的一些主要工具:分析二十个不同主题的文本文档(新闻组帖子)集合. 在本节中,我们将看到如何: 加载文件内容和类别 提取适用于机器 ...