@font-face制作小图标的实践

1、为啥要用font-face制作小图标 

 1）适用性：一个图标字体要比一系列的图像要小，一旦字体图标加载完，图标则会立刻显示出来，不需要去下载一个图像。

 2）可扩展性：可以使用font-size对图标进行大小设置，这使得能够随时输出不同大小的图标；但如果是图片，则需要为不同大小的图片输出不同的文件。

 3）灵活性：可以为图标添加任何文字效果，并且可以在任何背景下展示。

 4）兼容性：网页字体支持所有现代浏览器，包括IE低版本。

2、实现步骤

首先，将SVG转换成web字体。使用网站：Icomoon 

点击‘Import Icons’按钮导入需要转换为web字体的图标。选中后点击 ‘Generate Font’按钮将web字体下载下来。

 下载文件中有个demo.html，打开文件，可以看到不同的图标对应的通字符：

 其次，调用字体。

 声明@font-face:

        } 

 使用字体：

        } 

 测试代码：

</html> 

 效果图：