css使用font-face引入阿里图标库的图标 - Kaiqisan

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

• 首先打开阿里云官网
  

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

• 把图标添加购物车

• 打开购物车

• 点击下载代码

• 打开下载的文件，点击html文件（这是一个说明文档）

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

• 接着重新打开压缩包，把除了demo.css 和demo_index.html这两个文件的其他文件全部复制粘贴到你的项目目录下面

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

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1604028018278'); /* IE9 */
  src: url('iconfont.eot?t=1604028018278#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANMAAsAAAAABwQAAAL9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCDIF6ATYCJAMICwYABCAFhG0HMhsiBsiusCnDvUggREBhw6C6veA+ghBBtYb17G0IwbMkUNFR+M8aSKFwWP6FiRLvWVia164+c+fZM3LSujrBGayyL5s5dFJHfaOCUH5XYv1bgLLUWifs7KFqlTvcXJUEaMDl9Fvi84Bym2PYpgADSwPaG6NAAmmDBOYNYxe4hNMEKvVKxGzml9YCB5k1KRDnIt8FHHI+WWbJcqG0ZmWOeK1EeXqZHuJV+P34bTEcSEoKVtneWV4vyPwG7TTrof+d+gT+fBawdRSYBmTiqNa2wzqOTbNWqcVsDAL7Kg6+wf//fd5u/3gEUcoqrAbdkHdPfFdwq4UJ5LjzBHA56jZIUwmDB6Lraxf2sTOTR84ENtQf2RPIrN/ENDSsX7i1f13d/kund2Jr61ZPRS7s665blC22yY52Njcsr/swS5992O56v+fMPq/azn1+C6vedY3e3e/3nvU92KDsNFY2vdKtU5LBueqcksSPb4a/jPVH5z4hvLz3beh1/MvPsefm7M4tHdyM/6gGv/7icf67sU8fooxTMpe+DDYkW8W7nE62s/0/TfuWNUvf7ZWj0wmNyxdPqRnZs9mnzJcLWpAJ4P+7bFdc/Orf2Hq/mt3hmvqvvCqDr9cOklDQzwGU35A9+LEV2Yr/f3IpF1rRlNHCQ47kZJQlATWVDCXL1ejNWFXLW6RCuZZ3cZTpSVEoN0zKtGmUqLKMUuVWUGlKwfoqTQhrkSswaRwg1DuJpNYNCvUekTLtNUq0+oZS9WGNSifhuWOV0RDZHIK6KOqF3YNQ7MEmzjFSNiquRrxk6CJZYUivR8QiBqFKriwmC5AJkTnmWPp4NaUc5Ag2wnxwHjIYMDQTrEM9VC5Qak5WKLi6K8l7sBGwNhBIFwrpBXUbBIl6YCac355iS5+vhvAkBl1IS12Nsx5CWIjdQypyyh6kApmpV929XGLRh6dGURyIQ2BGUD6wIAY7hkHm+mE6SA9KThgRMUumQK24vjL5+grjB+SyJix1CntwofyOgKWeLhMPAAAAAA==') format('woff2'),
  url('iconfont.woff?t=1604028018278') format('woff'),
  url('iconfont.ttf?t=1604028018278') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1604028018278#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shoucang:before {
  content: "\e620";
}

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

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

• 下一步导入资源

<link href="font/iconfont.css" rel="stylesheet">

@import "font/iconfont.css";

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

• 到这里，资源导入已经完成了，接下来就是正式投入使用了

<span class="iconfont icon-shoucang"></span>

这样就可以显示了

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

<span>&#xe620;</span>

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

总结

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