为什么iconfont要设置vertical-align: -0.15em ？

Question

Iconfont官方文档说要引入这段CSS，然后就可以愉快使用<span class="icon iconfont"></span>了。

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

为啥要设置vertical-align: -0.15em;呢？这样图标不就没对齐吗？

Answer 1

因为icon的大小被设置为和字体大小一致（比如字体大小为30px, 那么icon的大小就是30px * 30px），span这个DOM的下边缘会和字体的基线对齐，这个时候就会出现字体和DOM看似没有对齐的效果，为了纠正视觉上的偏移，需要将span往下偏移一个比例。