酷勤网 – 程序员的那点事!
当前位置:首页 > 产品 > 视觉设计 > 正文

Icon font 实践

浏览次数: 2012年09月15日 UX 一淘体验中心 字号:
1、关于icon font 现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon font的支持如下:
  1. IE:从IE4开始支持eot格式,IE9开始支持woff。
  2. webkit/safari:支持TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+支持.ttf,iOS 4.2以下只支持SVG字体; Safari5.1+ 开始支持woff格式
  3. Chrome:除webkit支持的以外,从Chrome 6开始,开始支持woff格式;
  4. Firefox:支持.ttf和.otf,从Firefox 3.6开始支持woff格式;
  5. Opera:支持.ttf、.otf、.svg。 Opera 11开始支持woff;
  6. 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字体没有此现象产生。 (3)有同事反馈,firefox无法显示logo。 经过排查发现,造成此问题的原因是用户的设置导致的。 (4)XP上的safari在渲染icon font时,如果ttf文件缺失‘x’字符,会导致操作系统崩溃,造成蓝屏的情况。 这个问题很奇怪,因为在xp上用safari打开ux.etao.com/fonts没有这样的问题。当使用包含所有ux.etao.com/fonts的图标的字体文件时,也没有出现这种情况,但仅使用一淘logo相关的字体文件时就会出问题。通过对比测试,发现如果ttf字体文件缺少“0078”(unicode编码,字符x),就会导致这种现象。如下图所示: 此外,从Font Squirrel下载了几种字体,对比测试结论和上面一致:如果使用的ttf字体文件缺少“0078”(unicode编码,字符x),XP上的safari会导致操作系统崩溃。因此在使用icon font时,要确保ttf字体文件含有“0078”。 (5)IE9 不支持将@font-face放到media query里。这里有对@font-face比较详细的测试情况。
本文来源:原文链接
无觅相关文章插件,快速提升流量 齐乐娱乐