字体图标原理

在CSS3中有一个@font-face属性，这个属性可以用来实现服务器字体：让所有的用户都能使用相同的字体效果。

font-family

这个属性只能让用户使用自己本地的字体，达不到所有用户访问网站时字体统一的目的。

@font-face

在使用这个属性前，要考虑字体版权问题以及字体包大小。

会出现什么问题：

• 网页加载慢，因为中文字体包太大
• 版权问题，如果通过这种方式使用对应的字体，会涉及到版权

字体图标就是@font-face的最佳应用，本质上，字体图标就是别人帮你生成的一种特殊的字体文件。在我们项目中引入并创建出一种自定义的字体，然后实现对应的效果展示。展示的时候用的是一些我们自己不会轻易使用到的字符，例如：

如果我们想要自己引入对应的字体图标文件：

1. 引入字体文件并起一个名字

@font-face {
  font-family: icon;
  src: url(./font/iconfont.ttf);
}

1. 给元素设置一个类名并设置对应的字体

.box {
  font-family: 'icon';
}

1. 给元素中写入对应的字符

<div class="box">&#xe637;</div>

最终网页上展示出对应的字体图标

所谓的字体图标，就是利用别人定义的字体文件，通过@font-face引入后，利用特殊字符显示对应的图标的一种操作方式，本质上来讲，字体图标就是文字。