webfont 图标
老实说,在图形包中创建数十个小图标并不是一件好事。 即使收集了一个不错的集合,您最终还是要管理数十个小文件,或者创建图像精灵并将它们切片在CSS中。
幸运的是,HTML5为我们提供了另一种选择:webfonts。 字体集可以包含图形图标和字符集。 Wingdings是最著名的,但是像Iconic这样的免费字体会更有用,并提供示例HTML和CSS代码。
找到或创建合适的字体后,需要将其转换为多种格式,以确保良好的跨浏览器兼容性。 fontsquirrel.com上的@ Font-Face Generator为您完成了艰苦的工作,并提供了一个包含所有字体和CSS代码的ZIP文件。 然后,将字体导入到CSS文件的顶部,例如
@font-face {
font-family: "IconicStroke";
src: url("iconic_stroke.eot");
src: url("iconic_stroke.woff") format("woff"),
url("iconic_stroke.ttf") format("truetype"),
url("iconic_stroke.otf") format("opentype"),
url("iconic_stroke.svg#iconic") format("svg");
}
可以在HTML文件中添加图标字符,例如对Iconic的RSS图标使用“ r”。 但是,这可能会使使用屏幕阅读器的人感到困惑,因此CSS伪元素是一个更安全的选择,例如
您HTML:
<a href="rss.xml" class="rss">RSS Feed</a>
您CSS:
.rss:before
{
font-family: "IconicStroke";
content: "r";
}
Webfont图标的优点
Webfonts可以替代图形:
- 字体可以缩放到任意大小,使用任何颜色并应用CSS效果
- webfonts提供了良好的跨浏览器兼容性,甚至可以在IE6中使用
- 单个字体文件可能比多个图像更有效
Webfont图标的缺点
Webfonts可能并不总是合适的:
- 字体字符是单色的(尽管CSS3效果可以帮助)
- 生成字体不像PNG或SVG那样容易
- 如果只需要几个图标,则图像文件的大小会较小。
总体而言,对于Webfont图标几乎没有什么不喜欢的,它们可以减少开发时间。 您在任何项目中都使用过它们吗?
webfont 图标