http://nyaii.com/t/
在这个页面上有第一行第二行的公文包图标是FontAwesome,第四行和第三行是Google Material Design的Material Icon,可以看到或多或少都有与文字的对齐问题。其中Material Icon最为严重,与英文都不能对齐。代码如下:
<h2>字体</h2>
<div style="font-size:64px"><span><i class="fa fa-briefcase fa-fw"></i>主要业务</span></div>
<div style="font-size:64px"><span><i class="fa fa-briefcase fa-fw"></i>Some English Letters</span></div>
<div style="font-size:64px"><span><i class="material-icons" style="font-size:64px">menu</i>主要业务</span></div>
<div style="font-size:64px"><span><i class="material-icons" style="font-size:64px">menu</i>Some English Letter</span></div>
请问这是什么原因造成的呢?
Solution:
i.fa i.material-icons{vertical-align:bottom}
图标缺省对齐的baseline是英文四条线中的第三条,而中文都是对齐到第四条线的