Web端图标字体的探索

bolelee

前言:图标字体指的就是如font-awesome, semantic-ui icon这样的,通常使用方式是引入图标字体库文件(css文件及.eot/.svg/.ttf/.woff/.woff2格式字体文件),然后通过类名即可使用图标,根据图标字体库的规则,可修改其字体大小、颜色。前段时间借着微信小程序里图标字体的使用,对图标字体的使用及其原理有了进一步的了解,补充记录一下。

图标字体库使用解析:font-awesome为例

一般使用方法:将css文件及包含几种字体格式文件的fonts文件夹放入项目,然后引用该css文件,即可使用,如:

<i class="fa fa-home"></i>

fa, fa-home类名是如何实现显示图标的?查看css文件,主要代码是:

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-home:before {
  content: "\f015";
}

@font-face指明字体格式文件来源及命名:

font-family: 'FontAwesome';
src: url('path/to/fonts/~.eot');
src: url('path/to/fonts/~.eot') format('embedded-opentype'), url('path/to/fonts/~.woff2') format('woff2'), url('path/to/fonts/~.woff') format('woff'), url('path/to/fonts/~.ttf') format('truetype'), url('path/to/fonts/~.svg') format('svg');

指明使用此图标文件:

.fa {
    font: FontAwesome;
}

使用具体图标,如fa-home:

.fa-home:before {
  content: "\f015";
}

至此,对于图标字体实现的过程已有了大致了解,同时可以发现,如果只需要使用几个图标,而引入整个font-awesome图标库,明显有很多图标是冗余的,如果可以只定制需要的那几个图标,物尽其用,比较合适一些。
最简单的方式,不引入整个css文件,而只包含以上@font-face, .fa以及需要的图标的代码即可,然而进一步想,为何"f015"对应着home这个图标?答案便指向字体文件,字体文件里包含了这个描述,使得"f015"对应home图标,那么,可以知道,字体文件里必包含了你的项目里可能没有用到的其他图标。

iconfont图标定制

iconfont的使用则解决了上面所说的冗余图标的问题,即定制需要的图标,设计师还可画自己设计的图标。

iconfont官网对于其图标的使用作了说明,Web端除了上面所说font-class的引用方式,还可通过unicode,symbol两种方式,详细可阅读官网说明:iconfont代码应用说明

使用iconfont定制图标字体生成的代码,如(font-class引用方式):

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1501490511935'); /* IE9*/
  src: url('iconfont.eot?t=1501490511935#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1501490511935') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1501490511935') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1501490511935#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort:before { content: "\e60c"; }

.icon-top:before { content: "\e671"; }

.icon-remove:before { content: "\e62b"; }

[ 注:其字体文件与此css文件在同一目录 ]

小程序图标字体应用

小程序里使用图标字体,以上方式不能生效,因其不支持这些图标字体格式,需要将字体文件转化为base64格式,转化方式:通过第三方在线工具transfonter

更新:后来发现不需要用转换工具,iconfont导出的格式中,本身就包含了base64格式,使用该文件即可

转化后字体文件内容大致为:

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'iconfont';
  src: url(data:application/font-woff2;charset=utf-8;base64,d09GMg...) format('woff2'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRg...) format('woff'), 
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
  font-weight: 500;
  font-style: normal;
}

[ 注:以上base64部分省略了代码,其具体长度跟图标多少有关 ]

以上代码,加上指明使用的图标来源和具体的图标代码,就可以在小程序里愉快地使用图标字体了,如:

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort:before { content: "\e60c"; }

.icon-top:before { content: "\e671"; }

.icon-remove:before { content: "\e62b"; }
<view class="iconfont icon-sort">

可以发现,如果你转换整个font-awesome图标库,转化出来的base64格式文件会很长,因为其包含了很多图标,有些你的项目可能用不到;通过iconfont定制几个图标字体进行转化,会发现转化出的base64格式文件没有那么长,因其只包含了你定制的那几个图标。

相关的帖子:

在微信小程序中使用字体图标/自定义字体/外部字体
微信小程序添加并使用外部字体
微信小程序联盟相关帖子

小结

明白了图标字体的实现方式后,我更倾向于使用iconfont定制项目所需的图标,避免引用不必要的图标字体,增大项目代码体积,同时设计师也可以画其喜欢的风格的图标,不会受图标库提供的图标限制。

阅读 5.3k

Web前端-困知记
分享开发过程中总结的相对完整之所得,主要以Web前端开发为主;多为困而学所得,故名困知记。
1 篇内容引用

事不过三,消除重复

1.2k 声望
52 粉丝
0 条评论

事不过三,消除重复

1.2k 声望
52 粉丝
文章目录
宣传栏