sans-serifフォント使用時に文字が上方へずれて表示される

症状

meta要素で文字コードを指定したページでは、font-familyプロパティにsans-serifを指定された要素内の文字が0.2emほど上方にずれて表示される。

例示

<p style="float:left; width:8em; border:2px solid red;">
<span style="font-family:sans-serif;">サンセリフ</span></p>
<p style="float:left; width:8em; border:2px solid blue;">
<span style="font-family:monospace;">モノスペース</span></p>

サンセリフ

モノスペース

 

「サンセリフ」をサンセリフフォントで、「モノスペース」をモノスペースフォントで表示させています。

※具体的なフォント名を指定せずに総称ファミリのみを指定することはできるだけ避けてください。

補足

総称ファミリに割り当てられるフォントは環境依存のため、バグが発生する環境と発生しない環境がある可能性があります。

meta要素で文字コードを指定しない場合はずれることなく表示されるそうです。

修正状況

MacIE5.xで発生する模様。

報告書き込み

【MacIE5.x】
metaタグで文字コードを指定し,スタイルシートでfont-familyにsans-serifを指定すると,
要素が0.2emほど上方へずれる.
metaタグで文字コードを指定しなかった場合や,
font-familyがserifやmonospaceなら大丈夫というのがまた不思議.

関連記事

スポンサーリンク

voice-family 声の種類を指定する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る