CSS3 icon font

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，

为什么要将icon做成字体？

在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 index透明等。

使用字体来实现图标优势：

   字体文件小，一般20-50kb； 容易编辑和维护，尺寸和颜色可以用css来控制； 透明完全兼容IE6； 如何将icon变成字体。

   最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。

字体格式的浏览器支持：

目前，各个浏览器对字体格式的支持是最大的区别：

webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体；

Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；

Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；

Opera：支持.ttf、.otf、.svg。尚不支持woff Opera 11开始支持WOFF(多谢Apostle提醒~~)；

IE：只支持eot格式，IE9开始支持woff。

注：woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。

在CSS中使用icon字体：

先使用font-face声明字体：

@font-face {
font-family: 'emotion';
src: url('emotion.eot'); /* IE9*/
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('emotion.woff') format('woff'), /* chrome、firefox */
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
}

然后，在icon元素上使用该字体就好了：

.icon{font-family:"emotion" Tahoma;
...
}

<span class="icon">i</span>

 

转载于:https://www.cnblogs.com/jsingleegg/p/4560501.html