关于iconfont
来源:互联网 发布:苹果怎么删除软件 编辑:程序博客网 时间:2024/05/16 19:52
关于iconfont
背景
字面意思是字体图标,那么它到底是字体还是图标呢?
首先说一下字体是什么?
是字符,又是什么?
字符是文字与符号的总称,包括文字、图形符号、数学符号等。字符集是字符的集合。计算机如何显示这些字符呢?
把字符转换为整数,则成为编码字符集,目前有很多字符集,ASCII, UCS ,Unicode,以Unicode为例:
Unicode(中文:万国码、国际码、统一码、单一码)是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码,使得电脑可以用更为简单的方式来呈现和处理文字。
它的目的就是让计算机可以更为简单呈现和处理文字,所以我们在计算机看见的大都是基于Unicode编码转码的显示的一个过程。
我们也没有必要再去深究,只需要知道网页字符是通过计算机编码转变过来的。
font-family:\5FAE\8F6F\96C5\9ED1;/*微软雅黑*/
为甚用
使用字体来实现图标就有很多优势:
- 字体文件小,比图片文件要小得多的多;
- 容易编辑和维护,尺寸和颜色可以自由地编辑;
- 透明完全兼容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。
我认为制作图标比较耗时,目前已经有很多不错的iconfont库供我们前端同学使用,还能在这些库中建自己的资源库,可以满足一些日常的需求。
- 关于iconfont
- iconfont
- iconfont
- iconfont
- iconfont
- 关于阿里矢量图iconfont的应用
- iconfont技术
- IconFont浅谈
- iconfont图标
- iconfont使用
- iconfont 网站
- iconfont网址
- iconfont图标
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
- android中使用iconfont
- IconFont的使用方法
- HTML中使用iconfont
- Android 中使用IconFont
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
- struct和typedef struct
- JavaEE SSH框架整合(四) 日志处理Spring结合 log4j、slf4j
- Sicily 12993. Best of Seven
- Sicily 1088. Cows
- 关于iconfont
- 内核初始化优化宏 ,初始化顺序, __init,__devexit等
- Android:自定义PopupMenu的样式(显示图标/设置RadioButton图标)
- Normalized Mutual Information归一化互信息
- 主机无法访问vmware虚拟机WEB服务器解决办法
- 追逐自己的梦想----------辅助制作第二十课:完善自动技能打怪
- 数据库常见用法
- android UI素材(收集整理)
- uva 662 (经典DP邮局问题)