css - SVG 作为图标字体替代

Question

对于我当前的工作流程，我使用 Icomoon 生成的标志性网络字体。这是一种非常简单有趣的技术，具有明显的优势:

图标的行为就像任何其他字形一样，因此任何文本 CSS 转换都可以以自然的方式应用于它，例如 text-shadow , text-decoration , color等

轻松重用，只需添加必要的 font-family到元素。

但它有重大缺陷不让我 sleep 。

无论其曲线与像素网格对齐得多么完美，字体图标都是模糊的。更不用说糟糕的 Windows 渲染了。

很难在字体中添加新图标，尤其是当矢量源字体不可用甚至丢失时。

它需要一堆不同的字体版本(woff、eot、ttf)以获得可接受的跨浏览器支持。

最终字体根本就不是真正的图形(特别是不是单色)，这似乎不是使用虚拟空和非语义的正确方法<span class="icon"></span>以此目的。

嗯，显而易见的替代方案是 SVG，它没有提到的缺点。但是它有自己的缺陷，让我不能轻易使用它。

在我们的 HTTP/1.1 时代，很多小文件是完全 Not Acceptable 。

图标修改的创建不是一件容易的事情，需要手动编辑，这对于我们只键入npm-install的时代来说也很奇怪。

我在谷歌上搜索了一些 npm 包，但由于某些原因没有让我满意。

所以，我想请教您如何管理这项琐碎而日常的任务。是否有一种高效且可靠的方法来为旧浏览器生成带有原始图标和位图回退的修改变体的 SVG Sprite ？

Answer 1

在没有以下情况下谈论“支持旧浏览器”是没有意义的:

知道您的大多数用户将使用什么(当然，这将是多个浏览器)，以及

对您要使用的功能的支持是针对那些浏览器的，我们可以使用方便的 http://caniuse.com

话虽如此，这不是一个答案，而是解释您提出的所有“反对”字体的观点是没有根据的。答案很好，但在这种情况下，我们需要澄清事实，以便您可以根据事实做出真正的决定，而不是(“从不”或“不再”有效)成见。我花了太多年的时间从​​工程 Angular 使用字体来让您维护这些声明 =)

"Font icons are blurry no matter how perfectly its curves are aligned to a pixel grid. Not to mention awful Windows rendering."

这是简单的旧不是真的。作为矢量图形，如果它们渲染得不好，SVG 也会在相同大小下渲染得不好，尽管 SVG 通常会渲染得更糟:字体实际上允许 microprofile 优化来处理小点尺寸(.otf 在这方面比 .otf 更好。 ttf，但字体制造商需要花时间将它们放入。几乎所有专业字体都完成了这项工作)，而 SVG 没有，因为它的矢量图形语言中没有这样做的说明。因此，字体渲染要么与(如果它们没有优化指令)相当，要么优于(如果它们有)SVG。

例如，Font-Awesome带有轮廓优化，使其能够将像素完美渲染到 14px 的字体大小，这已经小于浏览器用作页面上文本的默认大小(几乎所有浏览器都同意使用默认值 16px衬线)。如果您将其图标集转换为 SVG，然后尝试使用缩小的图标集以匹配 14 像素大小，它们看起来绝对是一团糟。

或者您可以使用更进一步的图标集，例如 Symbol Set它明确设计用于网格对齐，这意味着即使尺寸小于预期，它仍然呈现出非常清晰的效果。

SVG 在这里输了。

至于 Windows 渲染，它可能看起来很糟糕，但这不是 Windows 的错。 Uniscribe 和 DirectWrite 都非常擅长渲染字体。就像，真的很好(这可能并不令人意外，因为桌面出版从一开始就一直是微软的核心业务，尽管这种情况正在发生变化)。与它们 Hook 的浏览器可以很好地呈现字体:IE 甚至从 IE4 开始就支持 Web 字体……那是 1997 年。那是在 HTML4 还没有出现之前，当时我们还在使用 HTML3.2。

问题不在于“Windows”，而是“Windows 上不是 IE 的旧浏览器”。浏览器在很长一段时间内并不真正关心网络字体。只是在最近几年，才突然做出重大努力，以确保它们具有良好的字体整形引擎(例如 Harfbuzz，现在被 Firefox 和 Chrome 使用)，除非您在 Windows 机器上使用现代版本的“非 IE”。

最后是 Windows 和 IE 上“字体 vs SVG”的特定问题:虽然 IE 几乎永远支持 Web 字体，但 SVG 支持仅在 IE9 中出现，因此如果您需要支持 IE8，you can't even use SVG .对于这个非常特定的目标受众，“字体与 SVG”甚至不是问题，您必须使用字体。

"It’s hard to add new icons to the font, especially when vector source font is made from is not available and even lost."

不，不是，您仍在使用 HTML 和 CSS，所以当我们需要“不在此字体中的字母”时，请执行我们经常做的事情:使用 font-fallback:font-family: iconfont1, iconfont2, iconetc.

"It requires bunch of different font versions (woff, eot, ttf) for acceptable cross-browser support."

现在不是几年了。这些天我们不需要多个来源:caniuse向我们展示了 everything supports WOFF并且已经为几个版本这样做了。

即使是 IE，但如果您需要支持 IE8，您还必须为自己找到一个 .eot (这实际上只是一个带有额外元数据的 ttf 文件，所以 IE 会接受它......就像 WOFF!)然后接受这样一个事实，如果这需要从 otf 转换为 eot，你会去最终得到一个糟糕的字体，因为它是一种有损转换(比如将 .png 转换为 jpg。优秀的转换软件可以产生不错的结果，普通软件会产生一般的结果)。

并且因为一切都支持 WOFF，我们(谢天谢地)不再需要荒谬的包罗万象的 ttf+otf+eot+woff+svg 集，使用“防弹”@font-face 规则尝试优化加载顺序，所以不要太许多文件被不必要地加载 - 只需使用 WOFF。完毕。在泡菜中，添加 .eot作为第一个源(带有格式指示符)，除 IE 之外的所有内容都将跳过它。

也值得一看SVG font support : 几乎没有任何东西支持它，而那些支持它的人正在弃用它。 SVG 字体作为一个东西已经停止使用，因为使用 SVG 字体的结果比使用真实字体要糟糕得多，强调了第 1 点的解释。

"In the end fonts are not really for graphics at all (especially not monochrome), it seems to not the right way to use dummy empty and non-semantic <span class="icon"></span> for this purpose."

这两种说法都是不正确的。

字体用于编码要在排版上下文中使用的矢量图形。这可能意味着字母、图标或表情符号；它甚至可以是音符或麻将牌。直到最近，他们这样做的方式一直是“单一颜色”，即 字面意思 什么是单色。字体的单色渲染可能会出现问题的唯一地方是在单色显示器上，在这种情况下:你的网页被访问的地方他们可以渲染网络字体，但是在古老的 CRT 技术上这样做 O_O

至于语义:如果您需要一个在文档中没有任何意义的图标并且纯粹是 UI 糖果，那么您 做 想要一个非语义元素，以便有视觉或阅读障碍的人的文本阅读器等不会让他们大声朗读您的图标，搜索引擎(私有(private)或公共(public))的文本索引器可以安全地完全忽略它们。您的图标绝对应该是一个可以被所有内容跳过的非语义空元素。

说了这么多，位图呢？

位图 absolutely win但是——这可能是一个惊喜——字体实际上可以包含嵌入的位图，这样它们就可以以小点大小呈现实际的位图，而不是矢量图形。

当然，只有高级字体才带有这些，但这也是您要检查的事情:您正在查看的图标字体是否带有位图？如果是这样，我们就有一个赢家。如果没有，那么您可能希望采用要使用的图标字体，将图标生成为位图文件，然后在您的站点上使用之前手动清理位图。

这个过程本质上是手动的，没有实用程序会为你做这件事，也不会出错足够多的时间，你仍然需要手动修复，但是如果你沿着这条路走下去，你会根据一个众所周知的图标制作自己的图标字体，使图标看起来比字体渲染更好的点大小:回馈世界并将这些位图发送回字体创建者，以便他们可以使用它们来构建字体的 EBLC, EBDT, and EBSC tables并且其他人都可以享受在字体中放置位图的乐趣，因此我们不需要进行疯狂的 CSS Sprite 渲染。