Iconfont阿里矢量图库结合css3属性font-face的使用

版权声明：博主GitHub地址https://github.com/suyeq欢迎大家前来交流学习 https://blog.csdn.net/hackersuye/article/details/83959053

    在前端的网页制作中，经常要使用到小图标来美化自己的网页，或者使用自定义的字体来美化，现在来看看如何用css3的属性font-face来结合阿里的矢量库，首先进入阿里的矢量图库，将自己选好的图标加入到购物车内，比如下载csdn的图标：

    接着点击下载代码，则会获得一个文件夹，主要用到的文件如下：

    其中的除了.css文件外，都是自定义的字体文件，里面包含着你所下载的图标，打开.css文件会发下有如下css代码：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1541600405827'); /* IE9*/
  src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),
  url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1541600405827#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-csdn:before { content: "\e50d"; }

    从代码中可以看到，不同的自定义的字体文件对应着不同的浏览器内核，而在最后一行，用css代码命名标出是csdn图标的，所以不用担心找不到对应的图标了。将上述文件拷进自己的项目，需注意的是，不知道怎么回事，.css里选择器用原来的名字会不显示效果，这里需要把.css里的选择器改名：

@font-face {font-family: "csdn1";
  src: url('iconfont.eot?t=1541600405827'); /* IE9*/
  src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),
  url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-csdn:before { content: "\e50d"; }

    在html里引用：

<p class="csdn icon-csdn">Hello world!</p>

    效果为：