[css]iPhoneとかで文字の位置がずれる時の対処法

小ネタ。

症状

こんな感じで組んだ。

<span>testtesttest</span>
<span>テストテストテストテスト</span>

<style>
span{
    padding: 2px 4px;
    display: inline-block;
    border: 1px solid #aaa;
    color: #999;
    vertical-align: middle;
}
</style>

PCのブラウザで見たら普通なんだけど、スマホで見るとアルファベットの方が変になる。
枠と文字の位置がずれる。

原因解明

webフォントが悪さをする場合がある。

今回はwebフォントが悪かった。

webフォントは読み込みが遅い。フォントが変わったときに位置がずれちゃって、スマホだとずれたままで元に戻らなかった、って感じ。

対処法

webフォントを諦めましょう。

span{
    font-family: serif;
}

手っ取り早く、ゴシックと明朝で択をかけてserifもしくはsans-serifを指定する。webフォントを諦める時点でセカンドベストでしかないのだから、代替のfont-familyを探すよりも読み込みが早い指定にしちゃったのが気が楽よね。