Icon Font玩法集合_html/css_WEB-ITnose

所谓iconfont就是用字体文件取代图片文件，来展示图标，特殊字体等元素。

---------优点---------

• 轻薄，字体文件小，一般10-30kb（用字蛛压缩）
• 兼容，透明完全兼容IE6
• 丰满，在hover，click等交互效果看来更为方便
• 百搭，矢量，缩放不变形，方便修改颜色，大小
• 安静，通过base64编码置于样式表内，不产生图片请求。

IconFont的实现在css里主要体现在@font-face，@font-face是css3中的一个模块，但是喜大普奔的是IE4+就可以支持它了！@font-face主要是把自己定义的Web字体嵌入到你的网页中。

这样我们在web开发的过程中，就可以使用Web安全字体之外的字体了。并且像一些常用的图标，我们也可以定义成font-face。这样就可以方便的使用那些自定义的字体，很轻松的就可以改变他们的颜色大小。省去很多切图的麻烦~

这篇文章主要记录了我的一些学习和实践 -。-

语法规则

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

取值说明：

• YourWebFontName是指你自定义的字体名称，最好是使用你下载的默认字体，它将被引用到你的Web元素中的font-family。
• source：指的是你自定义的字体的存放路径，可以是相对路径，可以是绝对路径。
• format：指的是你自定义的字体的格式，主要帮助浏览器识别。其值主要有以下几种类型：truetype(.ttf)，opentype(.otf)，truetype-aat，embedded-opentype，avg等。
• weight和style：这个应该很熟悉，weight指是不是粗体，style指的字体样式，比如斜体。

由于foramt涉及到浏览器支持的问题所以这边要说一下各格式的浏览器支持的情况。

• .ttf【IE9+,FF3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
• .otf【FF3.5+,Chrome4.0+，Safari3.1+，Opera10+,iOS Mobile Safari4.2+】
• .woff(Web Open Font Format)【IE9+,FF3.5+,Chrome6.0+，Safari3.6+，Opera11.1+】
• .eot(Embedded Open Type).eot是IE专用的字体，可以从.ttf创建此格式字体【IE4+】
• .svg是基于SVG字体渲染的一种格式【Chrome4.0+，Safari3.1+，Opera10+,iOS Mobile Safari3.2+】

根据以上介绍的浏览器支持的情况来看，在@font-face中我们必须得写上多种字体格式来获得更多浏览器版本的支持！

---

理论说完，下面要开始实践了

---

首先，获取特殊字体。获取特殊字体的途径，不外是找到付费网站，或者是自己去搜索然后下载。当然，我们选择后者的情况较多啦~Dafont.com我们经常会在这边找一些字体。

找到了字体，为了获取更多浏览器的支持，我们就需要各种字体格式了转化工具点这里然后我们会看到以下界面

字体格式转换

点击UPLOAD FONTS按钮，然后上传已保存在自己电脑的特殊字体，选择你要转换的格式，选中Agreement那边的选框，之后就可以点击DOWNLOAD YOUR KIT按钮download你所需的字体了。

我的实践

1、我的字体已经下载在本地了，大家可以按上文所述在Dafont.com下载字体2、在fontsquirrel.com转换我自己需要的字体格式然后就有了下图所示的字体们

字体文件

css：

html：

页面：

---

上文我们有说，@font-face除了可以将本地的字体用到web，也可以将图标做成字体。对于字体图标，在我的实际工作当中深有体会，不用切小图标，不用计算background-position还可以随意修改大小和颜色，简直是太开心了。

首先推荐一些图标字库：

• iconfont这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。

• fontello.com在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。

• icomoon可以在线导入的SVG格式字体,并迚行编辑,然后下载来使用。

• Glyphicon Halflings可以在Bootstrap下免费使用。自带了200多个图标。

• font-awesomeFont Awesome是一个强大的字体制作Icon的案例，作者在Bootstrap Icon的基础上将Icon图片换成了字体来制作。

我们在需要使用字体图标的时候，当然首先就会选择直接去这些网站（或者你也可以自己去发掘其他的一些网站，欢迎分享~）下载。下载的压缩包一般都会直接有各种格式的字体，现成的css文件和html的demo。直接用就好。

如果这些网站满足不了我们的需求的时候，我们就需要自己学着制作一些字体了。

如何制作自己的字体1、fontlab，但是这个应用收费，而且并不便宜2、fontcreator，免费的，最常用。点击查看fontcreator的具体使用方法在我们制作好自己的字体之后，使用方法就和上面介绍的一样了~

参考文档CSS3 @font-face