今天在写前端页面的时候,觉得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等图标在浏览器中的兼容问题的更多相关文章

  1. Hi3516开发笔记(十):Qt从VPSS中获取通道图像数据存储为jpg文件

    前言   上一篇已经将himpp套入qt的基础上进行开发.那么qt中拿到frame则是很关键的交互,这是qt与海思可能编解码交叉开发的关键步骤.   受限制   因为直接配置sample的vi比较麻烦 ...

  2. 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

    我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...

  3. 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

    我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...

  4. .Net开发笔记(二十一) 反射在.net中的应用

    反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...

  5. stm32开发笔记一:使用固件库在RealView-MDK中新建工程(上)

    很久没有碰单片机了,两年了吧,因为项目需要,最近入手一块红牛的开发板,核心为STM32F103ZE.虽然以前做过大概半年的stm32的开发,现在天天在.net平台下写代码,已经忘记的差不多,恰逢周末, ...

  6. 解决backgroud:transparent在低版本浏览器中的bug

    今天在html页面上定义了一个button和一个div,大小相同,button使用绝对定位,覆盖在div上面一层,同时样式设置背景透明(background:transparent). 这样就可以在看 ...

  7. 【转】Android开发笔记(序)写在前面的目录

    原文:http://blog.csdn.net/aqi00/article/details/50012511 知识点分类 一方面写写自己走过的弯路掉进去的坑,避免以后再犯:另一方面希望通过分享自己的经 ...

  8. Jx.Cms开发笔记(六)-重写Compiler

    我们在Jx.Cms开发笔记(三)-Views主题动态切换中说了如何切换主题.但是这里有一个问题,就是主题切换时,会报错 这是由于asp.net core在处理Views的信息的时候是在构造函数中处理的 ...

  9. Java开发笔记(十三)利用关系运算符比较大小

    前面在<Java开发笔记(九)赋值运算符及其演化>中提到,Java编程中的等号“=”表示赋值操作,并非数学上的等式涵义.Java通过等式符号“==”表示左右两边相等,对应数学的等号“=”: ...

随机推荐

  1. Erlang-VM节点启动名冲突问题

    今天在启动聊天的ErlangVM后,在日志中发现错误信息: Protocol 'inet_tcp': the name chatserver@127.0.0.1 seems to be in use ...

  2. 官网下载java相关资源

    官网下载java相关资源 官网地址:http://www.oracle.com 一.下载JDK 1.首先进入Downloads >> Java For Developers,如图 2.点击 ...

  3. MYSQL数据库学习----MYSQL函数

    MYSQL函数分为几种 数学函数 字符串函数 日期和时间函数 条件判断函数 系统信息函数 加密函数 格式化函数 一:数学函数 主要使用的几个数学函数 1 ABS()----绝对值函数 eg. SELE ...

  4. (水题)洛谷 - P1583 - 魔法照片

    https://www.luogu.org/problemnew/show/P1583 设计一个strcut cmp用来比较,就可以了. #include<bits/stdc++.h> u ...

  5. Cg(C for Graphic)语言语义绑定方法(转)

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 语义绑定方法 入口函数输入\ 输出数据的 ...

  6. bzoj 1874: [BeiJing2009 WinterCamp]取石子游戏【博弈论】

    先预处理出来sg值,然后先手必败状态就是sg[a[i]]的xor和为0(nim) 如果xor和不为0,那么一定有办法通过一步让xor和为0,具体就是选一个最大的sg[a[i]],把它去成其他sg值的x ...

  7. bzoj 3109: [cqoi2013]新数独【dfs】

    按3x3的小块dfs,填数的时候直接满足所有条件即可 #include<iostream> #include<cstdio> #include<cstring> u ...

  8. EOS:dfuse stream 保证不会错过一个心跳

    强大的 dfuse history API 给我们带来了高效的链数据获取途径,让我们的 dapp 在用户体验上了一个台阶. 官方示例 不会错过一个心跳 代码分析 函数 pendingActions 待 ...

  9. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  10. C#程序结构与基本语法

    C# 程序结构 Hello World 实例 一个 C# 程序主要包括以下部分: 命名空间声明(Namespace declaration) 一个 class Class 方法 Class 属性 一个 ...