网页规划技巧:Icon Font制造细节事例

2013-12-23 19:51:28  来历:ued.sina 作者:zhaolei 

网页制造Webjx文章简介:现在在提起Icon Font,现已不是什么新鲜的词汇了,网上现已有许多介绍它的文章,而且许多网站也现已将它用到,本篇主要是将制造Icon Font的整个流程收拾一下,而且加入了自己在制造中遇到的问题,使得咱们能够在往后运用的时分能够很快上手而且防止这些问题。

快速上手制造Icon Font

zhaolei:现在在提起Icon Font,现已不是什么新鲜的词汇了,网上现已有许多介绍它的文章,而且许多网站也现已将它用到,本篇主要是将制造Icon Font的整个流程收拾一下,而且加入了自己在制造中遇到的问题,使得咱们能够在往后运用的时分能够很快上手而且防止这些问题。

一、首要要说的是,什么是Icon Font?

我以为,咱们现在一般所指的Icon Font,是用字体文件替代图片文件,来展示图标、特别字体等元素的办法。

二、知道了什么是Icon Font之后,咱们要了解它能干什么,咱们是怎样用的

这是一淘网用到Icon Font的当地

快速上手制造Icon Font

这是新浪微博微吧用到Icon Font的当地

快速上手制造Icon Font

这儿还有咱们自己做的小浪人

快速上手制造Icon Font

三、下面咱们天然要看看Icon Font都有什么优缺陷了,然后决议咱们是否要运用它

首要它的体积要比图片小的多

快速上手制造Icon Font

这是做出来的一组Icon Font字体文件,试想一下假如这是图片的话要有多大,50K?100K?乃至更多?可是现在这个文件的巨细仅仅只要13K

快速上手制造Icon Font

不只体积小,而且还具有更好的可保护性(由所以矢量,所以拉伸不变形;色彩能够自行替换,支撑一些CSS3对文字的作用)

像这些图片彻底能够用Icon Font制造

快速上手制造Icon Font快速上手制造Icon Font

而且还能够经过base64置于CSS内,然后不发生图片的http恳求

当然,Icon Font也是有缺陷的,由所以字体,所以只支撑图片上是纯色的,多种色彩的就不支撑了

快速上手制造Icon Font
快速上手制造Icon Font

这其间的表情有多种色彩,因而就无法运用Icon Font了

可是在Win8下很多的纯色图标的呈现,是否是Icon Font能够遍及的一个时机呢?

快速上手制造Icon Font

尽管制造Icon Font天可是然要添加重构的本钱,可是跟后期保护比较仍是值得的

四、Icon Font的长处明显要大于缺陷,而且有能够运用的空间,因而咱们决议运用它之后,就要学会怎样去制造Icon Font

在制造之前咱们要知道需求什么东西,其实很简单,只需求FontCreator,PS这两个东西即可。

制造的进程,首要需求咱们的规划师给出Icon的矢量图,咱们需求在PS中将这个Icon图层栅格化,之后保存为png24,再在FontCreator中经过图片导入到字体中,进行巨细的调整(下面会给出字体制造各个值的用途,自己觉得比较重要的便是离左右的宽度以及离baseline的间隔,最好一类icon的布局的相同的,这样也便利对齐),最终经过在线东西将字体文件转化成咱们需求的多种格局。

快速上手制造Icon Font

这是字体各个值的意义

由于不同的浏览器所支撑的字体问题时有不同的,因而咱们需求将咱们制造好的字体转化成多种格局,附上一个比较好的字体转化在线地址:
fontsquirrel 咱们转化的时分假如没有特别需求,直接经过basic转化就能够

五、制造完成后咱们当然是要运用它了

首要是字体声明,由于各个浏览器所支撑的字体文件不同,因而咱们要针对浏览器的这个特色制造多种字体文件以到达兼容的意图

快速上手制造Icon Font

要在网页中显现,现在有两种方法,一种是直接在html中输入相应的Icon所代表的字体,优点是兼容一切浏览器,便是在更改Icon的时分需求下流的后端程序员搭档帮忙更改。

快速上手制造Icon Font

另一种办法是在CSS中经过after伪类添加,这样能够经过CSS直接操控Icon的类别,仅仅不是一切浏览器都兼容,可是咱们有必要考虑到IE6的用户。

快速上手制造Icon Font

经过剖析现在开发的流程以及项目,用榜首种办法在html中直接输入是比较适宜的。

当然了,咱们输入的时分怎样去知道要输入的字符是我要输入的Icon呢?只需求经过查阅Unicode对照表,依据字体制造软件中的Unicode码进行比照即可。

咱们制造Icon Font是为了自己之后运用的,由于一个便利办理而且运用的html组件页面是必不可少的,其间应该包含对Icon的描绘、所对应的代码等等这些信息,意图便是在自己或许搭档运用的时分能够很便利。

个人心得:

在制造Icon Font的进程中,自己也遇到了一些问题

 跨域问题,这个归于陈词滥调了,经过装备自己的服务器或许放在同域下都能够处理,还能够运用base64置入CSS中。
 制造字体文件的时分必定要记住不要为了是文件过小而瞎删里边的东西

快速上手制造Icon Font

这个软件中前面的这几个必定不要删,不然大部分浏览器都读不出来这个字体文件。

假如从PS导出的PNG24在导入字体文件的时分发生了变形,能够测验把PS中的矢量图等比拉大后在存成PNG24导入。

更多