techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

本文フォントについて

2012/07/26 HTML+CSS

本文フォントを適切に指定する

Windowsの場合は、ブラウザのデフォルトフォントは、MS Pゴシックです。
OSがVISTA以上であれば、より美しいメイリオがインストールされているのでこのメイリオを優先的に使うように設定します。

MS Pゴシック

メイリオ

Macの場合は、ヒラギノという美しいフォントが標準ですが、ブラウザによっては、
明朝がデフォルトになっているので、これもゴシックに統一する設定を行います。

以下の様に設定します。

body{
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; /*基本フォント指定*/
}

bodyに設定しているので、その子どもの見出し(h○)や本文(p)などすべての要素に上記設定が適用されます。

emやaddressでは、デフォルトで斜体になりますが、日本語で斜体を使うと見づらいので、これも初期設定で標準体に戻しておくといいでしょう。bodyセレクタに以下のプロパティを追加します。

font-style:normal;

本文の両端揃え

メイリオは、日本語が等幅で、英文がプロポーショナルのフォントです。
プロポーショナルは、文字に応じて幅が変動します。

ですので、英文が交じった文章では、右端のラインが揃いません。
Macのヒラギノもプロポーショナルなので揃いません。

これを揃えるためには、以下の設定を使います。

p{
    text-align: justify;
    text-justify: inter-ideograph;
}

text-align: justify;
は、日本語については、Firefoxだけが対応しています。

text-justify: inter-ideograph;
は、CSS3で日本語用の両端揃えですが、いまのところIE8以上だけが対応しています。

Chromeなどではいまのところ揃いませんが、設定しておいて、対応待ちします。