@font-face的用法

1. 下载一个字体文件。比如font squirrel网站。将文件保存在HTML和CSS文件相同的目录中。 它们是TTF（真实字体）还是OTF（开放字体）并不重要。解压缩字体包。 您可能会在包中找到多个字体文件，例如薄，中，粗，斜体，斜体等。

2. 生成多种字体。将下载好的字体文件转到Font squirrel Webfont Generator来制作多种格式。
   使用“上载字体”按钮上传你下载的那个字体文件。选中标记为“是的，我正在上传的字体在网络嵌入方面具有合法资格”的复选框。然后单击下载您的ZIP文件 - 将其保存在与HTML和CSS相同的目录中。

3. 查看下载的文字zip文件。在解压缩的目录中，您将看到三个有用的项目：
   每种字体的多个版本。例如.ttf，.woff，.woff2等; 跨浏览器支持需要多种字体。
   每种字体的演示HTML文件 。你可以在浏览器中加载这些文件，以查看字体在不同的使用环境中的外观。
   stylesheet.css文件，其中包含您需要生成的@ font-face代码。

4. 复制代码到css。具体操作：
   将解压缩的文件夹重命名为fonts。
   打开stylesheet.css文件并将包含在其中的@ font-face复制到你的.css文件中，你需要将它们放在最前面，因为字体需要在网站运行之前导入。
   每个url（）函数都指向我们要导入CSS的字体文件，修改路径，这里我们文件夹重命名为fonts，因此将fonts /添加到每个路径的开头（根据需要进行调整）。
   然后在元素中可以正常的使用你做好的字体，比如：p {font-family: 'zantrokeregular', serif; } 其中serif是后备字体，最好加上，防止有的浏览器无法识别的问题。