フォントファミリによる垂直方向の整列問題

Question

タグの下に縦に文字が表示される問題があります。この問題はOpen SansのGoogleフォントに特有です。 Arialやその他のフォントは正常に動作しているようです。何が問題なのか分からない。

ここjsFiddleを見つけてください： https://jsfiddle.net/or7nkyts/3/

最初のボタンは、オープンサンズがあり、第二1は、Arialフォントファミリを持っています。

何か助けていただければ幸いです。

<a target="_blank" href="javascript:void(0)" class="btn testClass"> 
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i> 
    <span style="vertical-align: middle;">Blue Button</span> 
</a> 
<a target="_blank" style="font-family: Arial;" href="javascript:void(0)" class="btn testClass"> 
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i> 
    <span style="vertical-align: middle;">Blue Button</span> 
</a> 

Answer 1

これはフォントがどのように作られているのかと思うので、CSSで操作する以外はほとんどできません。

spanに境界線を配置すると、フォント自体が下部よりも上に余白が大きく、実際にはアイコンの真ん中に位置することがわかります。ここで

a.testClass span { 
    border: 1px solid red; 
} 

はあなたのために良い仕事かもしれないソリューションです：

使用しているブラウザ

https://jsfiddle.net/32cLkm5x/2/