css字体图标使用

在前端领域中，我们经常会有到各种图片来摆脱黑白的网页界面，让网页变得更加生动有趣，但是要是我们要加入各种图标样式的话，可能加载的图片就会很多，导致浏览器会发送很多的请求，而且每个图标可能会消耗很多的流量，所以一般情况下，会考虑使用精灵图并且压缩来减少请求的大小，加快浏览速度，但是这样也不是很好，考虑我们要是在不同的屏幕分辨率下面，要显示相同的样子的话，我们就要准备不同分辨率的图片，这样的话，就会导致我们的精灵图片越来越大，这样的话我们的加载速度也不是很快了，当然我们也可以分分辨率来加载不同的样式，加载不同的精灵图，多亏了媒体查询，但是这样也会多了很多的设计成本和编码成本

在这种情况下，我们可以使用字体图标的样式，来实现，字体图标可以像使用字体一样，按照字体的颜色，大小来设置不同的颜色和大小，这样我们就可以只下载一套字体图标的woff文件，就可以在不同情况下使用了，大大减少了设计和编码成本，使用的方式如下：

// 定义一个新的字体
@font-face{
    font-family: test; //字体名称
    src: url(test.woff); //字体地址，可以是远程地址
}

// 使用字体
test-icon{
    font-family: test;
    font-size: 16px;
    color: #ff0000;
}

当然考虑浏览器的兼容性，也需要设计不同的字体图标，因为不同浏览器实现的方式不同，所以我们可能也需要加载不同的字体图标