firefox与IE9不显示icon字体图标
文章目录
- 1、关于icon font
- 2、在应用icon font实现一淘首页logo发现的问题。
1、关于icon font
现在主流浏览器(包括IE6)都支持css3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon font的支持如下:
- IE:从IE4开始支持eot格式,IE9开始支持woff。
- webkit/safari:支持TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+支持.ttf,ios 4.2以下只支持SVG字体; Safari5.1+ 开始支持woff格式
- Chrome:除webkit支持的以外,从Chrome 6开始,开始支持woff格式;
- Firefox:支持.ttf和.otf,从Firefox 3.6开始支持woff格式;
- Opera:支持.ttf、.otf、.svg。 Opera 11开始支持woff;
- iPad, iphone and Android 3.0+ 支持SVG fonts。
使用font-face声明字体:
@font-face {font-family: 'uxiconfont';src: url('uxiconfont.eot'); /* IE9*/src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('uxiconfont.woff') format('woff'), /* chrome、firefox */url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('uxiconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */}
2、在应用icon font实现一淘首页logo发现的问题。
(1)firefox和IE9不支持对icon font字体的跨域访问。可以将字体文件放到同域的服务器上或修改服务器配置,详细见这里。
(2)某些版本(16.0.912.75 m、15.0.874.106)的chrome,在搜索框获得焦点或在搜索框的菜单上滑动时,会产生遮盖logo的现象,其它浏览器未见此现象。
这个与字体的宽度范围设置有关,之前logo的宽度如下,注意红框内虚线部分
修改后的宽度:
对字体修正后,新版的一淘logo字体没有此现象产生。
经过排查发现,造成此问题的原因是用户的设置导致的。
此外,从Font Squirrel下载了几种字体,对比测试结论和上面一致:如果使用的ttf字体文件缺少“0078”(unicode编码,字符x),XP上的safari会导致操作系统崩溃。因此在使用icon font时,要确保ttf字体文件含有“0078”。
(5)IE9 不支持将@font-face放到media query里。这里有对@font-face比较详细的测试情况。
firefox与IE9不显示icon字体图标相关推荐
- html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示?
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
- 使用多个icon 字体图标库样式冲突问题
场景:项目中使用的UI样式库中包含一套icon 字体图标库,自定义一套字体图标库,在应用的时候,出现冲突,导致一方字体图标库无法显示或者显示不正常,原因:字体命名冲突,样式命名冲突,导致字体图标显示不 ...
- 原生小程序 之引入 icon字体图标
目录 原生小程序 之引入 icon字体图标 字体图标的配置 原生小程序 之引入 icon字体图标 icon官网 01:挑选对应的字体图标 02:添加入项目 ( 需要 自己创建一个项目 ) 03:点击下 ...
- 开源的icon字体图标网站
开源的icon字体图标网站 http://fontawesome.io/ https://icomoon.io/ http://www.bootcss.com/p/font-awesome/ http ...
- 在IE浏览器,icon字体图标不显示
1.问题出现场景 http地址在ie浏览器可以正常显示字体图标,但是https地址在ie浏览器无法正常显示icon图标. 2.问题解决方案 //这是本人的nginx配置文件location / {ad ...
- html页面icon字体无法显示,Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...
- 【html】如何处理显示ttf字体图标
当看到某些文件的后缀名是ttf,表示是字体文件,除了显示字体,还能显示图标,如果需要显示的图标太多,就把它们放在一个文件中,方便统一管理图标,在此讲一下怎么显示字体图标. 打开文件 电脑上用什么工具打 ...
- jsp中不能正常显示图片+不能正常显示bootstrap字体图标
一直以来,bootstrap框架下的轮播图在jsp中不能正式显示,我本以为是配置问题,导致bootstrap和jsp不一样. 话不多说,上图: 前期: 这是一个轮播图,可以看到第一:图片不能显示,我的 ...
- 【icon图标】icon字体图标的下载与使用
下载链接: icomoon图标库:Icon Font & SVG Icon Sets ❍ IcoMoon(国外) 阿里巴巴图标库:iconfont-阿里巴巴矢量图标库(国内 阿里巴巴图标库) ...
最新文章
- 2018年全球5G的12大趋势
- 干货!!!MySQL 大表优化方案(1)
- 玩美自由行体验报告 | 手摸手产品研究院
- 常见的工作流框架 Activity JBPM
- 简单的springboot应用,日志,静态资源配置
- Android 监听 摇杆,Android虚拟摇杆 摇杆 方向控制
- iOS - AVAudioSession详解
- 数据库服务器sa 密码修改,修改vcenter数据库账号密码
- QQ微信实时消息转发图片文件视频语音互联机器人自动发消息
- UltraEdit 注册机
- C语言的内存问题总结
- 如何更换ppt模板内容不变_怎么修改固定的ppt模板中的字和图片
- intel 显卡 opencl安装
- 做产品,懂人性,触人心
- 37种传感器(十)之手指心跳检测模块+Stduino NanoUNO
- Java小白修炼手册--第二阶段Java SE--IO流
- 7-2 jmu-Java-03面向对象-06-继承覆盖综合练习-Person、Student、Employee、Company (15分)
- 【JavaLearn】#(23)JSP相关语法、HTTP协议、Servlet介绍、Servlet生命周期、请求和响应、相对路径、转发和重定向
- Unity LOD-Level of Detail(多层次细节)使用心得2—— LOD Bias设置
- 塔尔斯基学派代表作—模型论(教科书)
热门文章
- SOFA Weekly|可信基础设施技术分论坛、Layotto 社区会议回顾与预告、社区本周贡献...
- 从源码深入接触ThreadX(1) --- 了解ThreadX
- 获取字符串以逗号隔开的两个值
- 千亿级工业巨鳄的博世集团为何坚持不上市?
- 计算机毕业设计Java学生考勤管理系统(源码+系统+mysql数据库+lw文档
- Place:30-574 vhdl
- Actix-Web构建一个简单的HTTP服务器
- 基于风险的测试方法(RBT)
- spring boot 源码解析29-LogbackLoggingSystem
- QTP10 R6025 Runtime Error解决方法