用webfont为你的网站添加图标

有些网站的图标不存在对应的图片文件，也并非通过js画图，它们的CSS长这样：

h2::before{

content:'\e942'

}

实际上e942是这个字符的16进制unicode编码，在unicode编码中，E000-F8FF是用户自定义区，形状可以任意制定。如果我们向网站引入自定义后的字体，就可以用上面的方式显示图标了。

css引入webfont：

@font-face {

font-family:;/**相当于变量名，可以自己定义，如果元素中的font-family对应这里，@font-face为这些元素定义了字体族，他们将使用src定义的字体**/

src:;/**使用的字体，可以是local("font名称")或者url("url地址")，支持多个来源**/

}

@font-face还可以为不同格式、不同字重的文字匹配字体，也可以为特定字符匹配特定字体，想了解更多可以参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

真正了解CSS3背景下的@font face规则

那么，到哪里去生成自定义字体呢？下面推荐3个相关网站：

IcoMoon App Ionicons: The premium icon font for Ionic Framework Fontello - icon fonts generator

想了解更多关于css插入图标的细节，参阅：

https://www.cnblogs.com/zccst/p/3655069.html