一次性搞定 Iconfont

我们都知道，在网页制作中，会经常用到不同的字体，常用的有 微软雅黑、宋体、Aria 等等。在我们写css的样式的时候，通过 font-family 可以指定元素的字体名称， 我们称这类字体为 WebFont 。但是传统的web开发人员的字体选择是有限的。只有少数几种字体可以保证在所有公共系统中都可以使用——这就是所谓的 Web-safe 字体。我们可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保我们的设计在每种字体中都可以使用，这增加了测试的开销。**Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件。**首先，在CSS的开始处有一个@font-face块，它指定要下载的字体文件：

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}
复制代码

然后我们就可以使用我们定义的字体了。

html {
 	  font-family: "myFont";
	}
复制代码

一个健全的网站，说不了各种图标，添加图标的传统方式就是图片，但是使用图片存在许多的弊端，主要表现是下面三个方面：

• 增加了页面的请求
• 图片的大小和颜色不容易改变
• 为了调高清晰度，图片越来越大

IconFont 的使用原理来自于 css 的 @font-face 属性。这个属性用来定义一个新的字体，基本用法如下

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}
复制代码

font-family：为载入的字体取名字。

src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

font-weight：定义加粗样式。

font-style：定义字体样式。

format对应字体格式 以及 常见兼容性写法：

@font-face {
 font-family: 'defineName';
 src: url('../fonts/custom-font.eot');
 src: url('../fonts/custom-font.eot?#iefix') format('embedded-opentype'),
      url('../fonts/custom-font.woff') format('woff'),
      url('../fonts/custom-font.ttf') format('truetype'),
      url('../fonts/custom-font.svg#defineName') format('svg');
 font-weight: normal;
 font-style: normal;
}
复制代码

定义好自己的 font-face 后，就有了新的 IconFont，给要使用这个 IconFont 的对象赋予对应的 font-family 即可。

.example {
  font-family: 'defineName';
  content: '/e103';
}
复制代码

这个例子就会将 example 选中的元素渲染为 /e103 对应的 icon。

我个人不擅长软件生成，这里贴两个还可以的教程

• 一个是 2016 年的，算是比较新的， 图标字体(IconFont)制作
• 一个是 2014 年的，不过提供了四种软件开发方式， Icon-font图标字体的四类制作方法

这里举两个网站的例子：阿里 IconFont， icomoon

阿里 IconFont 上面[使用现有 IconFont](#快速使用现有的 IconFont)里的知乎回答已经有详细的步骤了，这里就不详述。

icomoon 的使用截图如下。

随意选择几个图标，例如前四个

选择右下角的 Generate Font

点击 Download，会下载一个压缩包，解压后如下

可以看到有四个格式（eot/svg/ttf/woff）的字体文件，就制作成功了，接下来按照上面的步骤去使用吧（也可以参考 icomoon 为你生成的这个例子）

由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows 和 Mac 系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT– Embedded Open Type (.eot)

EOT 是嵌入式字体，是微软开发的技术。允许 OpenType 字体用 @font-face 嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType(.otf)

OpenType 是微软和 Adobe 共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代 TrueType 字体。

WOFF–WebOpen Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，实际上是对于 TrueType/OpenType 等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG 是由 W3C 制定的开放标准的图形格式。SVG 字体就是使用 SVG 技术来呈现字体，还有一种 gzip 压缩格式的 SVG 字体 SVGZ。