html - 将图标字体字形与文本对齐

Question

我正在做一个网站，我在图标对齐方面遇到了一些问题。我到处研究解决方案，但一直没有出现。

本质上，每次我使用图标并使其小于正文​​(例如 14 像素)时，图标都会被强制向下移动几个像素，如果我保持它的大小相同，则不会被强制向下，而是向下延伸。这可以通过 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 重置似乎无法解决这个问题。