使用网络字体作为矢量图标

前面已经介绍过网络字体(Web Fonts),而网络字体也可以作为图标字体(Icon Fonts)来用。图标字体是指把每个图标制作为字体的一个字符,从而组成的字体。这些字符自然是矢量图形,因此可以适应不同的大小,也可以随意调整颜色等。

以 Font Awesome 这个图标字体为例。既然是网络字体,自然需要先引入它:

@font-face {

    font-family: "FontAwesome";

    src: url("fontawesome.woff") format("woff"),

         url("fontawesome.svg#fontawesomeregular") format("svg");

    font-weight: normal;

    font-style: normal;

}

实际上,为了兼容各个浏览器,src 中还需要加上 eot,ttf,otf 等格式字体的 url,这里省略。

接下来,按照字体的说明,比如我们要使用五角星符号,可以在 CSS 中添加如下样式:

.fa {

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

}

.fa-star:before {

    content: "\f005";

}

其中 F005 是该符号在 Font Awesome 字体中的 Unicode 编号。一般来说,图标字体中各字符会在 Unicode 私有使用区(Private Use Areas)中编号,即在 E000 和 F8FF 之间。

现在,如果你给网页某元素设置 class 为 fa 和 fa-star,将会显示出该五角星符号来:

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

图标字体有个明显的缺点是,图标只能为单色,而不能为彩色。( 在 SVG 字体的规范中字符是可以是彩色的,但是作为网络字体,一则 IE 和 Firefox 不支持,二则即使在支持的浏览器似乎也没法用彩色字符。)因此,如果要用彩色的矢量图标,惟一可能的做法是用直接用 SVG 图形。

参考资料:
[1] CSS-Tricks - HTML for Icon Font Usage
[2] CSS-Tricks - Icon Fonts are Awesome
[3] Font Awesome, the iconic font designed for Bootstrap
[4] Elusive-Icons Webfont | shoestrap.org
[5] IcoMoon--limited- flat vector icons
[6] Iconic Icon Set - icons in raster, vector and font formats
[7] Raphael Icons

你可能感兴趣的:(网络)