Categories

Friends

COLORFUL

icon font 技术落地

iconfont管理平台可以参考fontello

兼容各浏览器的写法 常用的字体文件有eot(IE专用字体),woff(支持常见浏览器)，ttf(多增加对safari,android,ios的支持),svg(支持低版本ios safari浏览器)

@font-face {
 font-family: 'YourWebFontName';
 src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
 src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
            url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
            url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
  }

icon font使用总结

  • iconfont有两种引用方式：直接html插入code编码；css中after伪类content嵌入，第一种方法会存在字体库更改时会有code变化的问题，所以一般采用第二种方式
  • 通过伪类嵌入的方式在原生IE7有一定兼容问题，需要使用下面的设置去处理
Written on August 23, 2014