web 字体

有的时候我需要指定网页的字体对吧，但是这里有一个问题，这里指定了网页字体之后，调用的其实是用户操作系统的字体，但如果有一些用户的操作系统中没有安装这个字体，就显示不出来这个字体，这个问题我们以前提到过，我们通常是设置多个字体，但此时如果我需要让网页强制显示这个字体，就是不论用户电脑是否安装了这个字体，起码在我的网页上必须要显示这个字体，那应该如何解决呢？

此时就需要使用 WEB 字体，WEB 字体就是当用户电脑上可能没有指定字体的情况下，强制下载并使用改字体，使用 WEB 字体之前，需要有一个字体文件，一般是 ttf 后缀的字体文件（也可以是别的字体格式）。

有了字体文件，就可以使用一个@规则在 CSS 中定义一个新字体

@font-face{/*使用font-face制作新字体*/
	font-family:"font name";/*取一个字体名*/
	src:url("字体文件路径");/*指定字体文件的路径*/
}

我使用 font name 作为字体的时候，浏览器发现这是我们自定义的一个字体，此时就会从我指定的路径中自动下载这个字体文件，并且给这个网页应用上这个字体，此时就不会出现用户电脑字体缺失的情况。

我个人其实更愿意把这理解为我们去自己定义一个字体，实际上，一个字体就是一个字体文件，在 windows 系统中，系统字体文件存放在 C:\Windows\Fonts 中，这意味着当我们将一个字体文件拷贝到这个地方后，相当于在系统中安装了这个字体。

一般来说，绝大多数网站都不需要强制自定义字体，并且字体文件，尤其是中文字体文件本身是比较大的，所以实际上自定义字体用的并不是很多。

字体图标

我们先考虑字体是什么东西，实际上字体的本质就是一些图像，比如一个一个汉字，实际上可以看做一个一个图片，不同的字体样式实际上对应了不同样式的图片。如果理解了这个，那我们就知道，我们其实可以专门去做一套字体，这个字体里面的所有东西都是图标，此时当我们输入内容的时候，我们看到的就会是一个图标，这就叫做字体图标。

也就是说，我可以把我网站所有要用到的图标统一做成一套字体，当我需要使用某个图标的时候直接输入一个汉字或者一套字符即可。我们可以参阅 iconfont-阿里巴巴矢量图标库 来获取大量的字体图标。


我们可以选择自己需要的图标，添加到购物车


之后在购物车内，就可以将这些图标添加到一个项目，或者新建一个项目，完成后就可以看到这个项目


此时可以生成一个 css 文件，这个 CSS 文件的内容其实就是前面的一个 WEB 字体。

前面提到，WEB 字体可能会带来性能问题，即当字体文件过大的时候，用户体验可能并不是那么好。但实际上，这里字体文件的大小其实非常小，并不会出现那么多的性能问题，所以可以放心大胆用。

引用这个 CSS 文件之后，点击复制代码


就可以复制出一个类名，我们随便使用一个元素，将其类名设置为改代码，并且加上 iconfont 类名，该元素就会变成这个图标。

习惯上，用 i 元素来设置字体图标。
既然这个图标是一个字体，那么字体颜色，字体大小，这些字体样式，均可以设置，这一点显然优于精灵图这种图标方式。