跳到主要内容

图标字体与SVG - 这是最好的选择吗?

如果您正在为网站构建图标系统,您有什么选择?两种最流行的矢量选项是SVG和图标字体。

图标字体映射到单个Unicode字符,使您可以在单个文件中存储多个图标。字体是向量,因此图标可以缩放到任何大小。可缩放矢量图形(SVG)是一种基于XML的矢量图形格式,可以扩展到任何大小而不会失去清晰度。

每个都有它的优点,缺点和使用场景。以下是如何为您的项目做出正确的选择。

部署

  • 图标字体:字体可以通过@ Font-face规则或托管服务在本地提供。有多种技术可用于显示图标,许多技术基于字体的编码方式。最语义涉及使用CSS生成的内容来显示图标而不需要无关的内容。
  • SVG:SVG可以通过使用CSS背景,对象标签,img标签或直接内嵌到HTML中显示。使用内联SVG在图标系统中变得越来越流行,因为它允许在单个文件中使用多个图标而无需额外的HTTP请求。

渲染

  • 图标字体:这些被浏览器视为文本,因此您需要对它们进行规范化以避免文本消除锯齿问题。
  • SVG:SVG由浏览器呈现为矢量图稿,因此不会应用其他抗锯齿规则。

多功能性

  • 图标字体:图标字体是单色的,最适合简单的形状。多色图标字体是可能的,但通常需要将图标堆叠在彼此之上。图标可以通过任何通常用于设置文本样式的CSS属性设置样式,包括动画和变换。
  • SVG:SVG文件支持多种颜色和渐变,可以通过各种CSS属性和SVG滤镜效果进行样式设置,并且可以通过脚本进行动画和控制。您甚至可以控制SVG文件的各个部分,使您可以执行动画时钟指针或动态样式指示器等操作。

支持图标字体

  • 图标字体:图标字体得到很好的支持,甚至可以追溯到IE6。 Opera Mini不支持。
  • SVG:现代浏览器支持。 IE8及以下版本以及Android 2.3及以下版本缺乏支持。

性能

  • 图标字体:文件大小很小,这很好。字体缓存,为您提供额外的性能提升。字体加载问题可能会降低性能,甚至会导致偶然的故障。
  • SVG:这些通常比图标字体大,即使在压缩时也是如此。除非内联SVG,否则图标将生成其他HTTP请求。

判决书

使用具有基本样式要求的大量图标时,图标字体可以很好地工作。 SVG允许更多功能,但通常会增加更多开销,并且需要旧版浏览器的后备。

詹姆斯威廉姆森

这篇文章最初出现在网络杂志问题256



翻译字数超限