矢量图标上的字体重量打破元素对齐

Question

我有一个div包含一个矢量图标（在本例中，是一个fontawesome图标）。

图标水平对齐，我希望它位于容器的边缘（div）。正如您在此处所看到的，一切都按预期工作（您可能需要放大很多）

https://jsfiddle.net/k0h56myn/

图标和底部边框从相同的 x 坐标开始（红线表示完美的像素对齐）：

向图标添加font-weight: 700;样式会破坏此对齐方式，请参见下文：

我认为font-weight只会＆＃34;展开＆＃34; n 像素的图标，不关心所有对象重新定位和对齐..我是对的吗？

为了获得完美且经过批准的对齐，您有什么技巧可以阻止这种情况吗？

Answer 1

这里没有改变位置（Alignement）。它就像一个普通的字体。在添加字体粗细时，字体变得有些大胆。所有文本字体也只是这样。这不是问题。