css3的自定义字体

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

-----以上内容摘抄自RUNOOB.COM

我由此想到了以前接触过一种技术，即由美工用一些矢量绘图工具，绘制一些ICON，然后通过一个网站(https://icomoon.io/app/#/select)，帮助我们生成一堆文件，生成完成后，这个ICON已经变成了一种字体，也就是说，我们可以改变它的字体大小，字体颜色，hover事件等等。

值得一提的是，上面提到的网站，本身已经提供了许多现成的ICON，供一些没有美工帮助的前端人员去寻找自己需要的字体图标。

今天在看CSS3字体的时候，想到这个知识点，原因是当初了解的不是很深，只是知道它的一个流程，原理并不清楚。

CSS3中，支持任何字体，以前的前端人员，在写页面的时候，字体基本上就是用微软雅黑，宋体，仿宋等常见的字体，最重要的原因就是担心如果用了一些不常见的字体，然后用户电脑没有安装这种字体就会出现异常情况。

但CSS3弥补了这个缺陷。

我们可以通过以下方式，使用任何我们想用的字体，都不会出现异常：

@font-face{

　　font-family:'字体名称(可自己定义)';

　　src:url(字体文件路径)

}

以上代码就帮助我们增加了一种新的字体，这个时候即使用户电脑中没有这种字体，我们也可以放心的使用

div{

　　font-family:'上面font-face中定义的font-family的名字';

}

那么现在问题来了，为什么会把这两件事联系起来？我还记得当时问那个教我这个知识点的那个同事一个问题，引入了这个文件，所有的字体都会变成ICON形式的吗，相当于发明了一种新的字体吗(现在想起来真是愚蠢)。

当然不是。

这两者的区别是，我上面写的这个例子，是引入了一个完整的字体文件，它里面是包含了对所有已知汉字的对该字体的风格化处理的，所以引入了这个字体文件，就可以保证网页中用到的所有文字都是这个字体的风格，但前面说到的图标字体，其实硬要说的话，也可以理解成一个字体文字(或者说本质上就是)，但它里面只有一个文字，就是我们用到的那个ICON，我们只是通过某种技术，把它变成文字的格式了。