@font-face 不仅仅可以让我们的前端文字变得更加丰富，我们在前端页面中使用的很多图标也可以通过@font-face实现。而且下面会介绍到，这样使用@font-face实现的图标效果，代码也会非常的整洁、优雅。
讲到这里有必要说明一下自定义字体图标使用的字体格式。本文将会将会以一款免费开源的图标字体IconMoon为例。我们可以从IconMoon的官网生成想要的字体，并生成字体文件，然后把字体下载下来，得到下面四个文件。
.eot(Embedded Open Type格式)：IE专用字体格式。浏览器支持：IE4+。 .svg(SVG格式)：基于SVG字体渲染的格式。浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+。 .ttf(TrueType格式)：Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+。 .woff (Web Open Font格式): 针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的
使用字体图标的优势如下： 1. 矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源。 2. 轻量性：字体相对于一系列的图片资源要更加的轻量，一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。 3. 灵活性：由于图标字体，本质上是一种字体而非一种图标，因此我们可以设置各种字体属性，例如通过设置font-weight, font-size, font-color来改变图标的粗细、大小、颜色。 4. 兼容性：网页字体支持所有现代浏览器，甚至连IE4都可以支持。 关于图标字体已经介绍的差不多了，该来点干货了。下面将介绍利用CSS3的@font-face使用图标字体的具体方法。我们这里继续以IconMoon为例来展示图标字体。下面是图标字体的页面代码。
最后呈现出的效果图就是下面这样：
以上就是小编带给大家的如何操作的关键所在，如果觉得本经验对你们有帮助，请点击正下方的或者是右上角的“大拇指”或分享或“关注TA”给小编我进行一点小小的支持。大家也可以下面发表一下自己的看法。（未经同意，谢绝转载或复制。）
游戏时长不宜过度，会有害健康。