Webfont图标字体示例
Webfont 的图标字体用起来还挺香的，尤其是做后台系统、移动端页面这种，需要一堆小图标但又懒得切图的场景。你可以直接用类名控制图标显示，响应也快，代码也干净。
图标的加载方式和普通字体类似，用@font-face搞定，再加上:before或:after伪元素，图标就能像文字一样用content显示。缩放不会糊、改颜色也方便，和 SVG 一样灵活，比传统图片省心多了。
Fontello是我用得比较多的生成工具，它能帮你把多个图标打包成一个 Webfont 资源，文件名像fontello-98482793这种就是它导出的。你挑好图标，打包下载后，直接引入.css和.woff这些资源就行。
格式方面，WOFF、WOFF2、EOT这些都得准备一下，兼容性更稳。尤其老项目里还有 IE 的话，EOT基本不能省。
字体加载也有讲究，建议加个font-display: swap，页面不卡顿。要讲究点，还可以用<link rel="preload"
图标多的项目，建议用字体子集，只打包用到的图标，能减不少包体积。Fontello 或 IcoMoon 都支持这个。
，别忘了版权问题哦。别用那些来路不明的图标包，选官方的或者明确开源协议的，省得惹麻烦。
如果你想快速整一套自己的图标字体，又不想折腾太多，Fontello真的挺适合。搭配 Webfont 技术，省事又高效。
文件大小：314.11KB
评论区