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