1. 从FONT-FACE说起

要想了解iconfont，得从一个新的css3规则说起。css3中，新增了一种样式规则，@font-face，这个规则可以用来引入自定义的字体，到客户端。以前，我们的字体只能听任客户端的。因为用户没有安装的话，我们强制要求显示也没有办法。

现在使用@font-face则可以引入在web服务器上存放的字体文件，从而达到，可以使用一些客户端浏览器上不存在的字体，等到浏览器去访问并渲染时，去下载font-face指定的字体。并命名为我们想要的字体。

如图1.1：

<!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中使用的，正是我们存在服务端的字体。由于各个浏览器的兼容性问题，

  • IE浏览器：EOT
  • Mozilla浏览器：OTF，TTF
  • Safari浏览器：OTF，TTF​​，SVG
  • 歌剧：OTF，TTF​​，SVG
  • Chrome浏览器：TTF，SVG

所以，我们需要准备多个格式的不同的字体文件。指代同一份字体。

@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中找到。

2 什么是iconfont

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

3 iconfont怎么用

我们来拿手机百度首页的字体做个小例子试试(如图2.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">


        </h1>

        <h1>


        </h1>

    </body>

</html>

图2.1

我们看到我们在网页上写了一个字符&#xe609，本来这个字符对应的文字应该是什么都没有：

但是，我们的iconfont中赋予了这个字符的图像：，于是，我们将这个字符所在的区域的字体，设置为我们的iconfont文件。于是浏览器就渲染出了这个字符在我们的font文件中，对应的图像。

这里要注意一下----&#xe609 ，是一个字符的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平台，与其他图标拼合成一张字体文件。

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的更多相关文章

  1. iconfont使用，亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

  2. 如何使用IconFont字体图标代替网页图片？

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  3. 安卓图标IconFont使用

    一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图 ...

  4. iconfont的蜕化操作

    很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...

  5. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  6. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  7. 如何使用iconfont字体代替小图片？

    我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...

  8. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  9. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  10. fontcreator制作iconfont(包含两个教程)

    第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...

随机推荐

  1. dev grdicontrol 根据条件改变行颜色，字体颜色等

    dev grdicontrol 根据条件改变行背景   dev grdicontrol 根据条件改变字体颜色  dev grdicontrol 根据条件改变某个单元格背景 不用写代码  打开gridc ...

  2. iOS开发之让你的应用“动”起来

    概览在 iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互 式绘图,如何通过核心动画创建基础动画.关键帧动 ...

  3. 阿里云部署Docker(5)----管理和公布您的镜像

    出到这节,我在百度搜索了一下"阿里云部署Docker",突然发现怎么会有人跟我写的一样呢?哦,原来是其它博客系统的爬虫来抓取,然后也不会写转载自什么什么的.所以,我最终明确为什么那 ...

  4. StaggeredGridView+universal-image-loader载入网路图片实现瀑布流

    StaggeredGridView 开源lib  https://github.com/maurycyw/StaggeredGridView 文章demo下载地址  http://download.c ...

  5. linux重命名

    mv  A  B 将目录A重命名为B mv  /a  /b /c   将目录/a目录移动到/b下并重命名为c 其实在文本模式中要重命名文件或目录的话也是很简单的,我们只需要使用mv命令就可以了,比如说 ...

  6. 前端--关于CSS文本

    文本是网页中最重要的一种内容形式,文本几乎可以写在任何地方,块级元素中可以写行内元素中也可以写.文本都是由一个个字符组成的 ,在css布局中,每一个字符都有一个em框,通常font-size设置的大小 ...

  7. 未能加载文件或程序集“System.Web.Helpers, Version=2.0.0.0（转）

    在本地终于用上了ASP.NET MVC4自带的认证功能,但放到生产服务器上就出问题了:打开注册页面没问题,但一点下注册按钮就报错了: 未能加载文件或程序集“System.Web.Helpers, Ve ...

  8. Nohttp网络请求数据，Post以及Get的简单实用以及设置缓存文字的的请求

    开局声明:这是基于nohttp1.0.4-include-source.jar版本写的教程 由于nohttp功能强悍,因此需要多种权限,仅仅一个联网的权限是不够的,如果只给了Internet的权限,去 ...

  9. Win7刷新环境变量

    在“我的电脑”->“属性”->“高级”->“环境变量”中增加或修改环境变量后,需重启系统才能使之生效.有没有什么方法可让它即时生效呢? 下面介绍一种方法: 以修改环境变量“PATH” ...

  10. [Python]打开文件的模式

    Python中以sys.open()方法打开文件 import sys file = open("D:\\file.txt") 其中可在第二个参数的位置指定打开文件的模式 impo ...