[聊一聊系列]聊一聊iconfont那些事儿

时间 2019-11-06

标签系列 iconfont 那些事儿繁體版

原文原文链接

欢迎你们收看聊一聊系列，这一套系列文章，能够帮助前端工程师们了解前端的方方面面（不只仅是代码）：
https://segmentfault.com/blog/frontenddrivercss

1. 从FONT-FACE提及

要想了解iconfont，得从一个新的css3规则提及。css3中，新增了一种样式规则，@font-face，这个规则能够用来引入自定义的字体，到客户端。之前，咱们的字体只能放任客户端的。由于用户没有安装的话，咱们强制要求显示也没有办法。
如今使用@font-face则能够引入在web服务器上存放的字体文件，从而达到，可使用一些客户端浏览器上不存在的字体，等到浏览器去访问并渲染时，去下载font-face指定的字体。并命名为咱们想要的字体。如图1.1：html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            @font-face {
                font-family: myfont;
                src: url('./myfont.otf');
            }   
            .usefont {
                font-family: myfont;
            }   
        </style>
    </head>
    <body>
        <h1 class="usefont">
            测试1
        </h1>
        <h1>
            测试2
        </h1>
    </body>
</html>

图1.1前端

上面的自已个h1中使用的，正是咱们存在服务端的字体。因为各个浏览器的兼容性问题，css3

1.IE浏览器：EOT
2.Mozilla浏览器：OTF，TTF
3.Safari浏览器：OTF，TTF，SVG
4.歌剧：OTF，TTF，SVG
5.Chrome浏览器：TTF，SVGgit

因此，咱们须要准备多个格式的不一样的字体文件。指代同一份字体。github

@font-face {
    font-family: 'icons';
    src: url(../font/curiconfont.eot#iefix) format('embedded-opentype'),
         url(../font/curiconfont.woff) format('woff'),
         url(../font/curiconfont.ttf) format('truetype'),
         url(../font/curiconfont.svg?#iconfont) format('svg');
    font-weight: normal;
    font-style: normal;
}

后面的format指代的是墙面的资源是那种格式的。如想更详细了解，能够百度一下font-face。上面提到的例子能够在github上的hellofontface.html中找到。web

2 什么是iconfont

既然font-face能够指定字体文件，那么字体长成什么样，不就是开发者说的算了么。咱们能够描述一个字体，它长成这样：。其实，话说回来，文字不就是图像么。人类最先发明文字的时候就是按照图像来发明的。因此，咱们能够把一些字符，描述成图像。在咱们的网页上，当成图像来使用。这就是iconfont了。把一些零散的icon作成字体。咱们调用文字的时候，渲染出来的就是icon图像了。segmentfault

3 iconfont怎么用

咱们来拿手机百度首页的字体作个小例子试试(如图3.1)，咱们新加入一个font-face，起名为myFont，在须要使用这份iconfont的部分，font-family设置为myFont，则这部分区域可使用上该font文件:浏览器

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            @font-face {
                font-family: myfont;
                src: url('http://m.baidu.com/static/index/iconfont/iconfont_c0634602.woff');
            }   
            .usefont {
                font-family: myfont;
            }   
        </style>
    </head>
    <body>
        <h1 class="usefont">
            &#xe609;
        </h1>
        <h1>
            &#xe609;
        </h1>
    </body>
</html>

图3.1
咱们看到咱们在网页上写了一个字符，原本这个字符对应的文字应该是什么都没有：
可是，咱们的iconfont中赋予了这个字符的图像：，因而，咱们将这个字符所在的区域的字体，设置为咱们的iconfont文件。因而浏览器就渲染出了这个字符在咱们的font文件中，对应的图像。这里要注意一下---- ，是一个字符的html编码。这个字符在浏览器中没有定义，可是在iconfont中有定义。咱们可使用unicode码来惟一标识一个字符，将这个字符在咱们的文件中画出来。这样就能够利用上iconfont了。服务器

4 iconfont怎么作？

既然知道了怎么用，就要开始了解一下，如何制做一个iconfont了。国内有阿里巴巴的iconfont平台，能够选本身喜欢的图标导出iconfont。

http://www.iconfont.cn/

若是咱们手里有一些图标，想转换为iconfont的话，能够直接使在线工具转换：

http://image.online-convert.com/convert-to-svg

设计师们也可使用illustrator直接将图片导出为svg，具体导出方式能够参考以下连接：

http://www.w3cplus.com/svg/svg-files-from-illustrator-to-the-web.html

导出单个icon的svg后，能够上传至阿里巴巴的iconfont平台，与其余图标拼合成一张字体文件。(后续会更新一个咱们自产的iconfont生成框架)

5 iconfont的利与弊

看到这里，一些同窗确定会问，那咱们为何要用iconfont呢？直接用图片不就行了。

这里咱们分析一下使用iconfont的利与弊

5.1 iconfont的利

5.1.1 iconfont图像放大后，不会失真。

相信读者们没有见过文字在网页上放大的时候会失真的情况吧，由于字体是矢量的，字体的描绘只记录绘制的路径。而图片不是，咱们若是把一张小图放大若干倍以后，会发现图像变得模糊了。由于图像是基于像素点的描述，放大后，以前图像的一个像素，被放大为多个像素。天然是会失真的

5.1.2 iconfont节省流量

在图片清晰度要求越高的状况下，咱们的图片自己就会越大。这样很是耗费资源，并且，图像须要的色彩值信息，也会存储。这样也极大的浪费了空间。iconfont颜色由css决定，尺寸要求变大的话，则适应性的变大。传输的大小不会变大。

5.1.3 iconfont在颜色变幻方面很简单

试想，若是一个图标一开始是黑色的hover上去的时候变为蓝色的话，若是这个icon是用图片来实现的话，咱们须要在hover的时候，更换背景图片，若是使用iconfont的话，则能够直接替换icon的color就行。

5.2 iconfont的弊

5.2.1 iconfont不能支持一个图像里面混入多重颜色

做为文字，是不会出现左边是红色右边是绿色的情况的。一个文字，是一个总体，统一的颜色。这个颜色就取决于css的color了。因此使用iconfont作图标的话，最好使用纯色的图标。

5.2.2 iconfont的使用没有使用图片那么直接，简单。

若是单论直接使用的话，图片仍是比较便捷的。

至于本身的网站要不要使用iconfont就看各位了。

本章的例子在github上，须要的同窗请自行查看：

https://github.com/houyu01/iconfontsample

接下来的一篇文章，我将会和读者们一块儿聊聊前端模板拼装与渲染的那些事儿，不要走开，请关注我.....
前端模板拼装与渲染的那些事儿原创文章,版权全部,转载请注明出处