更新日:
フォントサイズを揃えるために
各ブラウザ、各OSによって実はフォントの表示サイズが違う。これを解決するための方法。
- normalize.cssを使う。
(自分でリセットしたいCSSだけを選んでCSS最上部に記述したり、別ファイルCSSにしておく方法もあり)
- font-size指定に%を使う。
(font-sizeを指定しない方がいいという意見もある。見る側ブラウザ側で見やすいフォントサイズが指定されている場合もあるので、こちらで固定してしまうと見づらいサイトになる可能性もあるという考え方だ)
- font-family指定時、2種以上指定しなければならない。
( 例 > font-family : 'meiryo UI', Osaka, sans-serif; )
2種以上指定しないと表示サイズがなぜか狂う。
font-familyの種類
- sans-serif : ゴシック系フォント(MS Pゴシック、arial、Helveticaなど)
- serif : 明朝系フォント(MS P明朝、Times New Romanなど)
- monospace : 等幅フォント(MS ゴシック、Osaka-等幅、Courierなど)
※ 以下のfont-familyは、normalize.cssにも特に記述が無い。
激しくデザイン性のあるフォントのため、サイズを揃えるのは実質不可能なのだと推測できる。
使って問題がない場所は限定されるのではないか。
そういう場合はむしろ画像を貼り付けてしまった方が(見る側の環境によってサイズが変わってしまうような)問題を極力減らせるのかもしれない。
実際、同じOSでさえもブラウザが違うだけで表記に使われるフォントが全く違う。
試しにこのページを違うブラウザで見てみると、明らかに違う。
つまり「見ている側のOSやブラウザが違うと、同じ見え方ではない可能性の方が高い」ということ。
- cursive : 筆記体、草書体フォント(HGP行書体、Comic Sans MSなど)
- fantasy : 装飾的フォント(Modernなど)