CSS3 icon font完全指南
转自 http://www.qianduan.net/css3-icon-font-guide.html
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。
为什么要将icon做成字体?
在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,比如png8 alpha透明或者png8 index透明等。
比如,twitter用到的各种小icon:
这种情况下,使用字体来实现图标就有很多优势:
- 字体文件小,一般20-50kb;
- 容易编辑和维护,尺寸和颜色可以用css来控制;
- 透明完全兼容IE6;
如何将icon变成字体?
最关键的是要将设计稿中的icon(要有矢量路径,位图没法转化)完美还原成字体,这并不是很麻烦。
我们要用到一些字体编辑软件,比如FontCreator、FontLab等,这里我们用FontLab来演示。
还原步骤很简单:
PSD–>eps–>FontLab,即将PSD转换为illustrator的eps格式,然后将某个字符复制到FontLab中即可。
具体步骤:
打开设计稿psd,将其保存为Photoshop eps格式,我们这里以Qzone中说说发表框的表情icon为例:
在illustrator中打开保存的eps文件:
取消分组,然后点选某个icon,复制。
打开FontLab,随便打开一款字体文件,比如tahoma.ttf:
然后双击某个字符,将原有图形删除,粘贴刚才复制的icon对象:
调整图形大小,一个icon就完成还原了。
就是这么简单。所有icon还原完之后,生成字体文件就可以了。
查看字体对应字符,可以在字体列表中,在某个字体上右键查看属性(快捷键Alt+Enter),查看该字体对应的字符:
可以看到字体对应的字符是i,unicode编码是0069。
字体格式的浏览器支持:
目前,各个浏览器对字体格式的支持是最大的区别:
- 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;
- IE:只支持eot格式,IE9开始支持woff。
注:以上资料来自于:webfonts.info
注:woff是最新的web开放字体格式(web open font format),w3c推荐,主要优势是针对浏览器进行优化,字体文件小。详情可查看wiki:
在CSS中使用icon字体:
先使用font-face声明字体:
1 2 3 4 5 6 7 8 |
|
然后,在icon元素上使用该字体就好了:
1 2 3 |
|
最后,在页面中使用这个字体:
<span class="icon">i</span>
支持CSS3的浏览器可以更上流一点儿,我们每次修改html可能没那么方便,如果要改变某个icon,则可能需要修改相关字符,比如将i修改为e等。如果使用css3的伪元素,可以方便很多:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
嗯,就是用实际元素占位,用伪元素+content属性显示icon,然后覆盖到实际元素上面,之后我们修改某个icon只需要更改css样式就可以了。
IE依然棘手:
因为IE9以前只支持eot格式,所以需要将ttf转换为eot先,这里可以使用微软官方的WEFT软件,也可以使用一些在线工具:
- http://www.kirsle.net/wizards/ttf2eot.cgi在线转ttf为eot格式;
- http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式
另外,eot文件必须添加域名白名单才可以使用,这里推荐使用CreateMyEOT:
总结:
其实,这种方法有一个不足,就是只支持纯色icon,最多能高端浏览器上实现渐变色或图形蒙板。
当然,我们有很多场景是用纯色icon,特别是在Windows 8这种Metro UI开始越来越多的时候。
另外,这种方法可以有效减少页面的请求,但是对于习惯使用CSSGaGa的auto sprite功能的同学来说,这种方法对页面性能的提升不大。
但是对于移动终端,特别是webapp中,这种方法还是有很大的用武之地的,可以很方便的兼容多分辨率,配合离线存储效果更佳。
如果你有这方面更好的建议和意见,欢迎提出。
转载于:https://www.cnblogs.com/KaPengQiang/articles/2406272.html
CSS3 icon font完全指南相关推荐
- html如何太假icon图标,CSS3 icon font完全指南(CSS3 font 会取代icon图标)
为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格 ...
- css符集图标显示不出来,CSS3 icon font完全指南(CSS3 font 会取代icon图标)
为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格 ...
- 在iOS中使用icon font
在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Retina屏的设备,苹果要求每个背景图都要以两种尺寸存(a.png和a@2 ...
- icon font大搜罗
免费字体 下面的这些icon font都是免费或者开源的,你可以大胆的使用,但是作为设计师,大家要有点儿修养,在使用前先看看相关字体文件的版权授权方式-- Font Awesome(150+个) 为配 ...
- 字体图标 icon font
原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小可以自由 ...
- html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示 本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...
- 解决firefox和IE9对icon font字体的跨域访问问题
解决firefox和IE9对icon font字体的跨域访问问题 参考文章: (1)解决firefox和IE9对icon font字体的跨域访问问题 (2)https://www.cnblogs.co ...
- Icon Font的转换
Icon Font是用于网页的纯色图标,这里引用一张网络图片: 由于体积小,易维护等特点,IconFont应用非常广泛. 这里推荐一个转换器,通过Upload一个后缀ttf的字体文件,可以反解出文件下 ...
- java后台icon font 图标替换
我们知道后台有些菜单图标,一般用的是iconf font,往往免费的一套icon font系统里的图标太少,满足不了我们一些需求,当然也有人说用重复的图标不就可以了,可是作为一个资深程序员,强烈病态的 ...
最新文章
- PDF编辑处理的一条龙服务
- 使用Docker中国官方镜像的加速地址
- 《12个球问题》分析
- Django框架(18.Django中的自定义错误500页面和不存在404页面)
- notepad++ tcl_TCL科技前三季度净利20亿元,投资并购超200亿元
- 利用Object.defineProperty实现Vue数据双向绑定
- 【读书笔记】摘自Google开源项目风格指南-C++风格指南
- C#操作存储过程,输入参数,返回结果
- 掌握了这30道MySQL基础面试题,我成了面霸
- hpy计算机维护系统,HPY计算机维护PE系统启动U盘\UD版\网启版制作图文教程
- 穿越计算机的迷雾总结
- 自己组装电脑配置清单2022 自己组装电脑需要哪些配件
- 数据结构(一) --- 开篇
- OUTLOOK无法打开
- 什么是spring框架?spring框架的好处?
- 今个没事,想仿做个qq农场助手,虽然很菜,不过有点收获
- mysql server安装及配置
- SD-Branch多分支组网解决方案
- he Enigma Protector一字节过注册
- 精准化测试之:jacoco实现增量代码覆盖率统计