由于移动端设备拥有不同分辨率,PPI 等引起的问题, 常常需要针对不同屏幕分辨率来调整优化,如使用 @2x 图片, max-width 限制等。cdNHTML5中文学习网 - HTML5先行者学习网
采用 css @font-face 用来显示 icon 也不失为一种好办法。cdNHTML5中文学习网 - HTML5先行者学习网
因为 icon fonts (字体)是矢量图形,所以不受分辨率的影响,同时可以做到完美缩放;当然,也可使用在 WEB 端。cdNHTML5中文学习网 - HTML5先行者学习网
优点cdNHTML5中文学习网 - HTML5先行者学习网
文件小cdNHTML5中文学习网 - HTML5先行者学习网
加载性能好cdNHTML5中文学习网 - HTML5先行者学习网
支持 css 样式cdNHTML5中文学习网 - HTML5先行者学习网
IE6/7 下也支持cdNHTML5中文学习网 - HTML5先行者学习网
缺点cdNHTML5中文学习网 - HTML5先行者学习网
样式限制,使用扁平化风格cdNHTML5中文学习网 - HTML5先行者学习网
移动端还存在不兼容问题cdNHTML5中文学习网 - HTML5先行者学习网
少量移动设备和 icon fonts 字符编码冲突cdNHTML5中文学习网 - HTML5先行者学习网
FF和 IE9 下跨域问题cdNHTML5中文学习网 - HTML5先行者学习网
性能问题cdNHTML5中文学习网 - HTML5先行者学习网
使用方法cdNHTML5中文学习网 - HTML5先行者学习网
制作字体文件cdNHTML5中文学习网 - HTML5先行者学习网
可以利用字体工具手动制作cdNHTML5中文学习网 - HTML5先行者学习网
也可以利用在线工具自动生成cdNHTML5中文学习网 - HTML5先行者学习网
在 css 中引用,如下cdNHTML5中文学习网 - HTML5先行者学习网
引入字体文件cdNHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板cdNHTML5中文学习网 - HTML5先行者学习网
@font-face {font-family: 'iconfont';cdNHTML5中文学习网 - HTML5先行者学习网
src: url('iconfont.eot'); /* IE9*/cdNHTML5中文学习网 - HTML5先行者学习网
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */cdNHTML5中文学习网 - HTML5先行者学习网
url('iconfont.woff') format('woff'), /* chrome、firefox */cdNHTML5中文学习网 - HTML5先行者学习网
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/cdNHTML5中文学习网 - HTML5先行者学习网
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */cdNHTML5中文学习网 - HTML5先行者学习网
}cdNHTML5中文学习网 - HTML5先行者学习网
再定义一个 icon-* 通配我们所有图标的共有 CSS 样式,cdNHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板cdNHTML5中文学习网 - HTML5先行者学习网
[class^="icon-"], [class*=" icon-"] {cdNHTML5中文学习网 - HTML5先行者学习网
display: inline-block;cdNHTML5中文学习网 - HTML5先行者学习网
speak: nonecdNHTML5中文学习网 - HTML5先行者学习网
font-family: "iconfont";cdNHTML5中文学习网 - HTML5先行者学习网
font-size: 16px;cdNHTML5中文学习网 - HTML5先行者学习网
line-height: 1;cdNHTML5中文学习网 - HTML5先行者学习网
font-style: normal;cdNHTML5中文学习网 - HTML5先行者学习网
/** 字体图标出现锯齿的问题: */cdNHTML5中文学习网 - HTML5先行者学习网
-webkit-font-smoothing: antialiased;cdNHTML5中文学习网 - HTML5先行者学习网
-moz-osx-font-smoothing: grayscale;cdNHTML5中文学习网 - HTML5先行者学习网
}cdNHTML5中文学习网 - HTML5先行者学习网
最后是利用 :before 来注入每个 icon 对应的字体编码cdNHTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板cdNHTML5中文学习网 - HTML5先行者学习网
.icon-bell:before {cdNHTML5中文学习网 - HTML5先行者学习网
content: "/003432";cdNHTML5中文学习网 - HTML5先行者学习网
}cdNHTML5中文学习网 - HTML5先行者学习网
.icon-search:before {cdNHTML5中文学习网 - HTML5先行者学习网
content: "/003433";cdNHTML5中文学习网 - HTML5先行者学习网
}