Icon Font玩法集合

2016-02-01 本文已影响1210人 SuperSnail

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

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

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指的字体样式，比如斜体。

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

根据以上介绍的浏览器支持的情况来看，在@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-awesome
Font Awesome是一个强大的字体制作Icon的案例，作者在Bootstrap Icon的基础上将Icon图片换成了字体来制作。

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

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

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

参考文档CSS3 @font-face