对于我目前的工作流程，我使用Icomoon生成的标志性网页字体。这是一种非常简单有趣的技术，具有明显的优势：
- Icon的行为与任何其他字形一样，因此任何文本CSS转换都可以以自然的方式应用于它，例如
text-shadow， text-decoration， color 等等
- 易于重用，只需添加必要的
font-family 元素。
但它有重大缺陷不让我入睡。
- 无论曲线与像素网格对齐有多么完美，字体图标都很模糊。更不用说糟糕的Windows渲染。
- 很难在字体中添加新图标，特别是当制作矢量源字体时不可用甚至丢失。
- 它需要大量不同的字体版本（woff，eot，ttf）才能获得可接受的跨浏览器支持。
- 最后字体根本不是图形（尤其不是单色），似乎不是使用虚拟空和非语义的正确方法
<span class="icon"></span> 以此目的。
嗯，显而易见的替代方案是SVG，它没有提到的缺点。但是它有自己的缺点，不容易让我使用它。
- 在我们的HTTP / 1.1时代，很多小文件都是不可接受的。
- 创建图标修改并不是一件容易的事，需要手动编辑，这对我们的just-type-npm-install时代来说也很奇怪。
我已经搜索了一些npm软件包，由于某些原因我不满意。
所以，我问你的建议如何管理这个琐碎和日常的任务。是否有生产和可靠的方法来生成SVG精灵与旧浏览器的原始图标和位图后备的修改变体？
在没有以下情况下谈论“支持旧浏览器”是没有意义的：
- 知道你的大多数用户会是什么（当然这将是多个浏览器），以及
- 您想要使用的功能的支持是针对那些我们可以使用的浏览器 http://caniuse.com
话虽如此，这并不是一个答案，而是解释你所提出的所有那些“反对”字体的点是没有根据的。答案很好，但在这种情况下，我们需要设置记录，以便您可以根据事实做出真正的决定，而不是（“从不”或“不再”有效）先入为主。我花了太多年的时间从工程角度处理字体，让你保持这些声明=）
“无论曲线如何与像素网格对齐，字体图标都很模糊。更不用说糟糕的Windows渲染了。”
这很老了不正确。作为矢量图形，如果它们渲染效果不佳，SVG也会以相同的大小渲染，尽管SVG通常会渲染 更差：字体实际上允许微小轮廓优化来处理小点大小（.otf比.ttf更好，但字体制作者需要花时间把它们放进去。几乎所有的专业字体都附带了完成工作），而SVG没有，因为它的矢量图形语言没有指令这样做。因此，字体呈现（如果它们没有优化指令），或者比（如果它们）SVG更好。
例如， 字体 - 真棒 附带轮廓优化，允许它一直渲染像素完美，直到14px的字体大小，这已经小于浏览器用作页面上文本的默认大小（几乎所有浏览器都同意使用16px的默认值）衬线）。如果您将其图标设置并将其转换为SVG，然后尝试使用按比例缩小以匹配14px大小的图标，它们看起来绝对模糊。
或者您可以使用更进一步的图标集，例如 符号集 它明确地设计用于网格对齐，这意味着即使尺寸低于预期，它仍然显得非常清晰。
SVG输给了这里。
至于Windows渲染，它可能会 看 不好，但这不是Windows的错。 Uniscribe和DirectWrite都非常擅长渲染字体。喜欢， 真 好的（这可能不足为奇，因为桌面出版传统上一直是微软的核心业务，因为它已经开始了，尽管这种情况正在发生变化）。挂钩的浏览器会渲染字体 真的很好：IE甚至支持自IE4以来的网络字体......那是1997年。那是在HTML4甚至是一件事之前，我们当时还在使用HTML3.2。
问题不在于“Windows”，因为它是“在Windows上不是IE的旧浏览器”。很长一段时间，浏览器并不真正关心网页字体。只是在过去的几年里，主要的努力突然变成了确保它们配备了良好的字体整形引擎（如 的HarfBuzz，现在被Firefox和Chrome使用），除非你在Windows机器上使用现代版本的“not-IE”，否则你不会得到很好的字体结果。
然后最终在Windows和IE上出现了“font vs SVG”特有的问题：虽然IE已经支持Web字体，但是SVG支持只停留在IE9中，所以如果你需要支持IE8， 你甚至不能使用SVG。对于这个非常具体的目标受众，“字体与SVG”甚至不是一个问题，你 有 用字体。
“很难在字体中添加新的图标，特别是当制作矢量源字体时，不可用甚至丢失。”
不，不是，你仍然在使用带CSS的HTML，所以当我们需要“不是这种字体的字母”时，我们总是这样做：使用font-fallback： font-family: iconfont1, iconfont2, iconetc.
“它需要大量不同的字体版本（woff，eot，ttf）才能获得可接受的跨浏览器支持。”
不是几年了。这些天我们 不要 需要多个来源： 我可以用吗 告诉我们 一切都支持WOFF 并且已经为几个版本做了这样的事情。
即使是IE，虽然如果你需要支持IE8，你也必须找到自己 .eot （这实际上只是一个 ttf 文件带有额外的元数据，所以IE会接受它...就像WOFF！）然后生活在这样一个事实，如果这需要从otf到eot的转换，你将最终得到一个糟糕的字体，因为它是有损转换（如将.png转换为jpg。优秀的转换软件可以产生不错的结果，正常的软件会产生平庸的结果）。
因为一切都支持WOFF，我们（谢天谢地）不再需要荒谬的无所不包的ttf + otf + eot + woff + svg，还有一个“防弹”的@ font-face规则试图优化加载顺序所以不要太多许多文件被不必要地加载 - 只需使用WOFF。完成。在泡菜中添加 .eot 作为第一来源（同 格式指示器）除了IE之外的所有内容都会跳过它。
这也值得一看 SVG字体支持：几乎没有人支持它，那些正在做的事情正在弃用它。 SVG字体作为一种东西已经停止使用，因为使用SVG字体的结果比使用真实字体要糟糕得多，强调了第1点的解释。
“最后，字体根本不适用于图形（尤其不是
单色），似乎不正确的方式使用虚拟空和
非语义 <span class="icon"></span> 以此目的。”
这两个说法都是不正确的。
字体用于编码将在排版上下文中使用的矢量图形。这可能意味着字母，图标或表情符号;它甚至可以是音符或麻将牌。他们这样做的方式直到最近才被称为“单色” 按照字面 单色是什么。单色渲染字体可能是一个问题的唯一地方是 单色显示器 在这种情况下：你的网页在哪里被访问，他们可以渲染webfonts，但在古代甚至为CRT技术O_O这样做
至于语义：如果你需要一个在文档中没有任何意义的图标，那么你就是纯粹的UI糖果 做 想要一个非语义元素，以便视觉或阅读障碍人士的文本阅读器等不会让你的图标大声朗读，搜索引擎（私人或公共）的文本索引器可以完全安全地忽略它们。你的偶像应该 无疑 是一个非语义的空元素，可以被所有东西都跳过。
总而言之，位图怎么样？
位图 绝对胜利 在低点大小，但 - 这可能是一个惊喜 - 字体实际上可以包含嵌入的位图，以便他们可以在小点大小渲染实际位图，而不是矢量图形。
当然，只有高级字体随附，但这也是你要检查的东西：你看到的图标字体是否带有位图？如果是这样，我们有一个胜利者。如果没有，那么您可能想要使用要使用的图标字体，将图标生成为位图文件，然后在您的站点上使用之前手动清理位图。
这个过程本身就是手动的，没有任何实用程序可以为你做这个并且没有错误的时间，你仍然需要手动修复，但如果你 做 沿着这条路走下去，然后根据一个众所周知的字体制作自己的图标，其大小使得图标看起来比字体渲染更好：回馈世界并将这些位图发送回字体创建者，这样他们就可以了可以用它们来构建字体 EBLC，EBDT和EBSC表 而其他人都喜欢在字体内部使用位图，所以我们不需要做疯狂的CSS精灵渲染。