网页图标使用字体文件来定义

某天想从淘宝网上截取一个购物车的图标使用，结果发现其图标根本就不是一个图片，而是从一个字体文件中引用的，所谓的图标就是一个字符，然后浏览器根据字体渲染出来的一个图标，其原理和文字显示一个样。下面看看其实现方式：

首先在css中需要声明font-face，也就是加载字体文件，如下：

<style type="text/css">
@font-face
{
    font-family: iconfont;
    src:url(/font/iconfont.ttf);
}
</style>

然后就和普通字体一样使用iconfont这个字体名字了，如下：

<style type="text/css">
.iconfont
{
    font-family: iconfont;
}
</style>

<div class="iconfont">u</div>

在现在这个扁平化风格大行其道的时代，这种方式还是非常好的。