所有232 展开类目

Icon font 实践 ƕ

2012/09/11
嘘... 嘘... 嘘... 嘘... 嘘...

     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的现象,其它浏览器未见此现象。

      

 

       此外,从Font Squirrel下载了几种字体,对比测试结论和上面一致:如果使用的ttf字体文件缺少“0078”(unicode编码,字符x),XP上的safari会导致操作系统崩溃。因此在使用icon font时,要确保ttf字体文件含有“0078”。

(5)IE9 不支持将@font-face放到media query里。这里有对@font-face比较详细的测试情况。

7 条评论   |   账号登录: è域账号     Ƹ淘宝账号     ǔ新浪微博
W3COO
W3COO 发表于: 2014-05-07 08:40:12
这个怎么用
嘘...
嘘... 发表于: 2013-09-03 13:52:11
fontlab
互联网不好混了
互联网不好混了 发表于: 2013-09-02 17:44:55
借问下你们使用的是什么字体制作工具呢?
嘘...
嘘... 发表于: 2012-09-26 15:08:01
不错
嘘...
嘘... 发表于: 2012-09-12 13:58:10
在的~~
嘘...
嘘... 发表于: 2012-09-12 11:10:31
嘘...
嘘... 发表于: 2012-09-12 10:51:03
web font使用还是相当不错的。
loading...