CSS3 icon font完全指南及icon font大搜罗

2012-06-29 00:00:00 by 【6yang】, 2603 visits, 收藏 | 返回

http://www.qianduan.net/icon-font-large-collecting.html
http://www.qianduan.net/css3-icon-font-guide.html

http://www.qianduan.net/css3-image-styles.html

 

  

CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。

其实这个firefox很久以前就支持了,而IE一直不支持!

上一篇文章:CSS3教程(7):CSS3嵌入字体

“opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。

浏览器兼容性

opacity是浏览器支持最好的一个CSS3元素…当然,除了IE

CSS3透明(例1:层)

opacity-div

上面的透明例子使用了下面的样式:

div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }

为什么要将icon做成字体?

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

比如,twitter用到的各种小icon:

这种情况下,使用字体来实现图标就有很多优势:

  • 字体文件小,一般20-50kb;
  • 容易编辑和维护,尺寸和颜色可以用css来控制;
  • 透明完全兼容IE6;

如何将icon变成字体?

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

我们要用到一些字体编辑软件,比如FontCreator、FontLab等,这里我们用FontLab来演示。

还原步骤很简单:

PSD–>eps–>FontLab,即将PSD转换为illustrator的eps格式,然后将某个字符复制到FontLab中即可。

 
分享到:
share

    图片原图

    loading

    loading