新趋势:使用 inline SVG 取代 icon font

本文为译文,原文标题:inline SVG VS icon font,链接:via 。

如果你正在为网站构建图标系统,你会有很多选择。如果你的 icon 需要使用位图,那么可能会选择 CSS Sprite 。如果使用矢量图标(近期更普遍使用的方案),你也会有一些选择,其中的两种方案是使用 inline SVG 或 icon font 。

针对二者的特点,我们来做一下比较。

(译者住:本文只比较以 inline 方式写入文档流的 SVG 方案,不讨论以 CSS background 写入背景图的方案。)

图标是矢量的

矢量图标有很大的优势:可调整大小而不失品质,在视网膜屏幕上也可以清晰显示,文件尺寸也非常小。

icon font inline SVG
浏览器认为这是文本,所以会对其使用抗锯齿。这可能导致图标不如你想象的那么锐利。 真正的矢量

举一个我个人最近的例子,在 CodePen 项目中,一些 icon font 明显比那些 SVG 要模糊。(译者注:其实通过固定字号的 henting 可以解决这个问题)

CSS 控制

icon font inline SVG
您可以通过 CSS 控制大小( 使用 font-size ), 颜色,阴影,旋转等。 和 icon font 一样,你可以使用同样的控制器。更赞的是,你可以 1)控制图标的各个部分 2)使用 CSS 控制 SVG 特有的属性,如描边属性。。

这个回合里,SVG 的最大亮点是,这种格式的图标可以是彩色的。

定位

icon font inline SVG
定位 icon font 可能是一个令人沮丧的过程。这些图标是通过伪元素插入的,它依赖于line-heightvertical-alignletter-spacingword-spacing ,字体字形设计(它的四周有留白吗?它有字距信息吗?)。如果字符有相关特效,伪元素将会显示这些特效 SVG 的显示尺寸就是它本身的尺寸

看看伪元素如何超出了它本身的界定框。

SVG 的界定框的大小就是 SVG 本身的大小。

诡异的问题

icon font inline SVG
icon font 可能会失效,因为:1. 它被跨域加载,而没有使用正确的 CORS 头信息,Firefox不喜欢这样。 2. 因为任何原因,字体文件加载失败(网络抽风,服务器故障等)。3. 一些奇怪的 Chrome 漏洞会跳过 @font-face 规则,并使用fallback 的字体取代它。4.  一些神奇的浏览器不支持 @font-face。

在所有的原因中,字体加载失败是最常见的。

inline SVG 是在文档流中,如果浏览器支持,它就会显示。

语义

icon font inline SVG
如果是正确地使用,你会 通过空的伪元素 <span>显示你的图标。这是否是不好的或者不符合语意的,取决于你如何看待这样类写法。 图标是小的图像。<svg>的语意是说“我是个图片。”这看起来似乎好些。

无障碍(针对残障人士)

icon font inline SVG
使用 icon font 必须要非常小心,以确保做到无障碍访问。基本上,你需要做到这篇文章 里所描述的。你必须一直很小心,以确保该图标本身不可朗读(但别的文本部分可读),并且,这种情况难以检测故障。 我不是专家,但研究表明,使用元素的适当的组合和属性,如 <title><desc>aria-labelledby可以很好地透过浏览器传达信息。并且,没有奇怪的故障状态。

易用

icon font inline SVG
使用预创建的 icon-font 实际上是不专业不负责的(因为有太多闲置图标白白占用空间),而自己创建 icon font 从来不是一件容易的事。我认为最好的工具是PICTOS Server (仅限于PICTOS 自家的图标),以及 IcoMoon(免费登录以保存项目)。Fontello 有一个API,可惜没有看到基于它制作的好工具。 inline SVG 更容易,因为如果需要你可以完全手动制作。或者使用类似IcoMoon工具(无论哪种输出方式)。或者使用这个 构建工具

浏览器兼容性

icon font inline SVG
很广泛。即使是 IE 6。 还不错,问题出在 IE 8 和 Android 2.3-。可以使用 fallback 规则,但不完美。

赢家

这一切都取决于浏览器支持。如果你的项目只兼容到 IE9+/安卓3+,inline SVG几乎在所有方面都比 icon font 要好。如果您需要更广泛的浏览器兼容性,我觉得 inline SVG 方案会带来很多麻烦,所以不建议尝试(比如文件需要一个 PNG 副本,需要插入额外的元素以显示降级后的 PNG 版本,隐藏对应 SVG 元素…这太麻烦了) 。

 

6 Comments to This Post

Add a Comment
  1. 我来看看,欢迎不欢迎?

    回复

  2. 不错,不错,看看了!

    回复

  3. 看看!

    回复

  4. 年中快乐!

    回复

  5. 博客不错,嘎嘎!

    回复

  6. 受教了!呵呵!

    回复

添加评论

邮箱不会被公开, 标有 *的是必填项

*
*