深入浅出fonticon字体图标

作为一名前端开发工程师，常常需要将图标展现到页面上，一种常见的方式是使用图片，但是图片有一些不足之处，比如加载速度较慢、难以修改颜色等等。那么如何解决这些问题呢？这就需要用到fonticon字体图标。

一、fonticon的概述

fonticon字体图标是指将图标素材打包成字体，通过CSS设置字体样式来展示出不同的图标。与图片相比，它有以下优点：

加载速度快，只需要请求一次字体文件即可。
支持修改颜色、大小、样式等样式属性，方便与页面整体风格相协调。
清晰度高，解决了在高清设备下图片模糊的问题。

fonticon的建立需要应用程序或者网站的需求，将图标素材定制化成一种可以嵌入在网页等HTML文档中的字体数据（.ttf, .woff, .eot等），同时将每一个字体数据对应一个 Unicode字符。然后通过设置内联CSS样式，将指定的Unicode字符映射为对应的字体样式（即图标）。

二、使用fonticon

1、引入字体文件

@font-face {
    font-family: 'my-iconfont'; /*定义字体名*/
    src: url('my-iconfont.eot'); /*定义eot字体文件路径*/
    src: url('my-iconfont.eot?#iefix') format('embedded-opentype'), /*针对ie浏览器*/
         url('my-iconfont.woff') format('woff'), 
         url('my-iconfont.ttf') format('truetype'), 
         url('my-iconfont.svg#iconfont') format('svg');
}

以上代码片段是定义fonticon字体库，其中的font-family定义了字体名称，也是后面引用字体时所用的名称。src定义了字体文件所在路径，分别对应eot、woff、ttf和svg字体文件，优先使用指定格式，若不支持就使用下一格式。最后使用SVG格式做为备选方案。

2、定义字体图标

.iconfont {
    font-family:"my-iconfont" !important; /*使用定义的字体*/
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-camera:before { content: "\e60c"; } /*使用 Unicode字符对应的css样式显示对应字体*/

这里.iconfont定义了使用的字体样式，同时通过content设置了对应字体字符的Unicode值，如上述代码表示图标的Unicode编码为\e60c，可以替换成其他字体对应字符的编码。

3、应用字体图标

最后一步就是在HTML标签中应用刚刚定义的字体样式，可以使用<i>或者<span>标签，然后加入字体样式和对应的字符编码，其中字体样式名为iconfont，而前面定义的图标样式名为icon-camera。这样就可以在页面中显示出相应的图标了。

三、fonticon的使用技巧

1、图标大小

通过设置font-size可以改变字体图标的大小，同时通过CSS3的transform属性也可以进行缩放。

.iconfont {
    /*更改font-size大小*/
    font-size: 24px;
    /*缩放图标大小*/
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}

2、图标颜色

字体图标颜色的修改与文本颜色修改完全一样，可以使用color属性直接设置。此外还可以使用CSS3的text-shadow属性，通过设置同样的颜色，实现阴影效果，达到立体感。

.iconfont {
    /*修改颜色*/
    color: #333;
    /*立体效果*/
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

3、hover交互

可以通过伪类:hover，为字体图标添加鼠标悬浮效果，使其体验更加炫酷。

.iconfont:hover {
    /*更改字体图标颜色*/
    color: #ff6600;
    /*使字体图标放大*/
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}

4、多行文字中的fonticon

在多行文字中，fonticon的大小往往受到行高的影响，为了让字体图标垂直居中，需要设置合理的line-height和vertical-align属性。

.iconfont {
    /*设置字体图标垂直居中*/
    line-height: 1;
    vertical-align: middle;
}

四、fonticon的兼容性

fonticon在兼容性上，现代浏览器完全支持，但是ie8及以下版本不支持CSS中使用content属性（解决方法：使用引入字体方式的fonticon）；而且有些字体，比如阿里巴巴的iconfont是采用SVG格式做为多彩字体，可能在部分低版本浏览器中出现不兼容问题。

五、结语

通过以上介绍，相信大家对fonticon字体图标已经有了比较清晰的了解。它不仅可以使页面加载更快、更炫酷，还可以方便进行样式修改。因此，fonticon字体图标已成为现代网站设计的必备技术之一，相信在不久的将来，它将更广泛地应用于各类网站和应用程序中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286790.html