webfont 图标_Webfont图标：图像的替代方法

webfont 图标

老实说，在图形包中创建数十个小图标并不是一件好事。 即使收集了一个不错的集合，您最终还是要管理数十个小文件，或者创建图像精灵并将它们切片在CSS中。

幸运的是，HTML5为我们提供了另一种选择：webfonts。 字体集可以包含图形图标和字符集。 Wingdings是最著名的，但是像Iconic这样的免费字体会更有用，并提供示例HTML和CSS代码。

查看webfont图标演示页面…

找到或创建合适的字体后，需要将其转换为多种格式，以确保良好的跨浏览器兼容性。 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图标演示页面…

翻译自: https://www.sitepoint.com/webfont-icons/

webfont 图标