css使用font

大家好，都吃了吗？我是Kaiqisan,是一个不善言辞的羞射男孩,今天讲讲font-face的使用方法，它其实在项目中相当常见。

首先打开阿里云官网

搜索随意一个图标（我这里的搜索关键词是收藏）

把图标添加购物车

说明文档里面有所有的使用方法，但今天我就详细地说明一下怎么使用它

我们现在打开demo.css这个文件

咱来看一下代码的含义把 最重要的就是这个@font-face，它链接了字体资源，除了可以引本地资源，还可以引入网络资源。 PS：上面虽然定义了很多的资源，但它们本质上是一个图标资源的，只不过它们的格式不一样，这样是为了兼容不同的浏览器（上面注释也写了相应的资源是为了兼容何种浏览器）

上面的代码多次使用了font-family,但其实这并不是定义字体（虽然说@font-face本来被发明出来就是为了使用网络字体从而从电脑中固定的字体中解脱出来），而是定义一个图标，其主要原理就是使用 css 语法中的 :before在每一个标签前插入一段内容，所以这里插入了图标信息 content: "\e620"; (content属性与 :before 相互配合)

上面两种方法都可以（如果您的浏览器都可识别的话）

这样就可以显示了

PS：此时这个图标已经被注册成一个字符，所以我们也可以通过转义字符来使用这个图标（就把它当做一个字）

这样也可以正常显示了（里面的e620参照上面的css样式里面的:before里的content）且可以使用font-size定义它的大小。

这是图标的一种比较稳定的使用方法，且不会失真，建议学习。