将图标字体字形与文字对齐

Question

我正在做一个网站，并且在图标对齐方面遇到了一些麻烦。我到处寻找解决方案，而且还没有到来。基本上，每次我使用一个图标并使其小于主文本（比如说14px）时，图标被强制向下几个像素，如果我保持它的大小相同，它不是被迫下降，而是向下延伸。这可以通过position: relative; top: [pixels]px;来纠正，但是感觉很脏。我尝试了垂直对齐基线和中间，我也尝试了其他一些东西。

下面是带有图标的例子比文字更小：

这里是带有图标的大小相同文本的例子。

的问题是次要的，但是图标应该与文本对齐。似乎很多人都有这个问题，但没有解决方案为我工作。

解决方案是什么？我应该考虑图像，而不是图标字体？或者SVG，也许？我尝试使用SVG图标时遇到同样的问题。

Answer 1

此前，我指责了字体。现在，随着工作的进一步深入，似乎字体的部分原因是 - 字体大小不统一，需要调整才能使元素排列起来。所以，总是有选择调整字体本身。

如果字体仍然不起作用，或者如果您不能编辑字体，<span>与position: relative;top: -1px（或任何其他px/em/rem值，直到它看起来是正确的）的技巧。但是，这并不是很适合跨浏览器的 - 在Firefox中，这让事情看起来很正确，IE和Edge也是如此。但在Chrome中，所有内容都是0.5-1px。

奇怪的是，CSS重置似乎并没有解决这个问题。