CSS Firefox テキストをhoverでboldにするとテキストの上下位置がずれる

依頼案件で見つけたのでメモ。

家のPCではなぜかずれる現象が再現できなかったのですが、同じ症状が起きた時は試してみてください。

hoverした時にテキストがboldになるボタンがあります。

Firefoxだとhoverしたときにテキストの位置がほんの少し下にずれます(Windowsのみで確認)。

少し気持ち悪いですね。

font-familyにヒラギノ角ゴが優先的に指定されている時に起こるようです。

解決策

例えば、webでの可読性が高いフォント「Verdana」、Macなら「Helvetica」などがメジャーどころでしょうか。

CSSの記述は以下です。

font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",

"メイリオ",Meiryo,"游ゴシック",YuGothic,sans-serif;

このfont-famlyをbodyに指定すると、全体的に英数字がverdanaになってしまうので、hoverでboldになるボタンごとに付けるのが吉です（verdanaは読みやすいけどキャラクターが強めなので）。

ボタンが英数字の場合、多少印象が変わってしまうのがデメリット。

メイリオや游ゴシックを優先的に指定することでも直りました。

font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"

ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;

游ゴシックはWindowsのブラウザではかなり読みにくいので、メイリオをオススメします。

他社のデザイン案件をやっていると未知の動作に遭遇するので勉強になります。