谈谈前端应用到的图标实体

来源：互联网发布：鸮和猫头鹰区别知乎编辑：程序博客网时间：2024/06/05 03:47

要谈图标实体，先谈谈css3中的@font-face。@font-face是css3中出现的网络字体。

为什么需要@font-face的出现呢？往下走起！！！！！

一、谈谈@font-face

在很早以前，如果你用的是windowXp系统，你会发现在你的浏览器中的字体应是宋体。。

而之后window7/8年代时候，windwow系统默认的字体变成了微软雅黑，于是所有的中文网站上的字体全部变成了微软雅黑了。。

那么如果你想要自己用自己设计的字体呢？那么css3出现的@font-face正好满足了你的要求了。。

在@font-face声明里，你可以声明一种字体，指定这种字体字体库文件从网络中的某个地方下载，

具体写法如下。。

@font-face {
font-family:<YourWebFontName>;
src:<source>[<format>]
[,<source>[<format>]]*;
[font-weight:<weight>];
[font-style:<style>];
}

解释下：font-family:自定义字体名称，在使用时候直接写font-family:<Your Web Font Name>

src [source]:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

src [format]:此值是属于自定义字体的格式，主要是帮助浏览器来识别，主要有以下几种类型：

{turetype,opentype,true-aat,embedded-opentype,svg等等 }

font-weight: 定义是不是粗体，

font-style: 定义是不是斜体或者正常字体

可能大家有疑问了，那么这个属性各浏览器的支持情况，还有就是万恶的ie6是否可以支持。我也查了，神奇的是@font-face这个属性早在ie6之前的版本就已经兼容了。我了个去~~。其它浏览器就不用说了，最新版本的FF，chrome，safari都支持的很好。不过字体文件的支持跟浏览器还是有关系的。对于各种后缀的font文件，我从别人的blog那copy了一段文字，给大家看看。
一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face{

font-family:"name";

src :url('name/字体.eot');/*IE9+*/

src:url('name/字体.eot#iefix？') format("embedded-opentype") /*IE6-IE8*/,

url('name/字体.woff') format('woff) /*现代浏览器都支持*/

url('name/字体.tff') format(truetype) /*safari Android ios*/

url('name/字体.svg') format('svg)

}

二、图标实体实现原理

那图标实体怎么实现呢？意思就是自定义一种字体，给不同的字配置作为icon的图案，然后通过css嵌入其中使用。使用它可以轻松解决把图片变为字符的问题，因为一旦将icons当做普通text来处理，font-size,color之类的文本修饰就可以随手解决，有了css3的支持，加个text-shaow ,也可以字体旋转

举一个例子来说 Font-Awesome 是一套比较好的字体图库和css框架，想看的童鞋可以在此点击http://fontawesome.dashgame.com/

写前端的童鞋如果用过font-Awesome的字体图标的话知道，在css中，它并没有引入图片，而是纯粹的css代码。

上传图片给大家看下：

童鞋们可以看到代码中并没有图片的引入。。。可以看到fa 这个class 中定了font-family:FontAwecome;

然后在.fa-home:bofore 伪类中定义了content:"\f015";

那这是这"\f015”这个16进制是什么意思呢？往下走！！！！！

大家可以在官方下载整个Font-Awesome项目，到目录的font下面，那个里面有很多font文件，那么，有兴趣的同学可以用font编辑软件打开看看font文件里面的内容，我想大概就明白了，我这里就截图吧。具体字体编辑软件很多，我用的是fontlab stduio ，大家可以自己选择

大家可以看到，每一种图片都对应的是一个十六进制编码。。

讲到现在，大家估计也很明白了，如何实现小图标的字符实体，就是在css中自定义字体。然后在应用那个小图标的时候，写入小图标的编码就可以了

还有就是使用font来控制比使用background那引用简单便捷易于控制，而且对于很多不同浏览器对位置的计算不是一样的，那么有时候大家会发现，icon在不同的浏览器中表现的不是一样的，尤其是繁琐的定位。而且对于不同版本的浏览器引入的图片文件还不尽相同。这里又要说到万恶的ie6了，对于png图片，ie6下使用png8，解析度就要差很多。当然了ie6下也不支持以上写法，因为对于css3的支持还要从ie9开始才有很好的效果。只是一种解决的思路。

三、如何免费利用开源的图标字体-IcoMoon工具

那简单的介绍下IcoMoon ：打个比方，如果杭州四季青有200家服装店属于拿货卖衣服给别人（这就是大搜罗的icon font们），但是其中有一家就是属于拿别人家的衣服根据客户的要求进行定制，而且高矮胖瘦，随便定制，而且还有穿衣说明，也进行特别定制。。而且有打包导出功能，兼容ie6+ ,以及各种现代浏览器，而且最重要的一点是：这完全是免费的。。

那么上手开始吧！！！！！！

首先点击 icoMoon App