CSSでのフォント指定について

ここまでのまとめ

Macは「ヒラギノ角ゴ Pro W3」で表示、WindowsのInternet Explorerは「ＭＳ Ｐゴシック」、ただし英数字は「Verdana」、また、字間を少し空ける、といった目的をかなえるためには、次のように指定します。

body {
	font-family: sans-serif;
}
* html body {
	font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 1px;
	vertical-align:baseline;
}

字間調整や英数字の組み替えが不要であれば、次のようにまとめて記述します。

body {
  font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}

アップルのサイトでは「Lucida Grande」というGill Sansぽいフォントを組み合わせているようです。実際の記述は異なりますが、ここまでの流れと組み合わせると下記のような記述になります。

body {
	font-family: "Lucida Grande", sans-serif;
}
* html body {
	font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 1px;
	vertical-align:baseline;
}

Dreamweaver CS3のデザインビューでは、CSSで日本語フォントを指定すると行間が開いてしまいます。上記のように指定すれば、これを回避できます。

メイリオへの対応

Windows Vistaでは、デフォルトのフォントに「メイリオ」が採用されました。「Verdana」の日本語版ともいうべきデザインの書体です。 当然、Internet Explorer 7のデフォルトフォントも「メイリオ」が採用されると思いきや、Internet Explorer 7では「MS P ゴシック」がデフォルトです。

「メイリオ」のデザインが同じサイズでも横幅が広いため「メイリオ」で表示すると、レイアウト崩れが起きてしまうサイトが少なくないという配慮からInternet Explorer 7での採用を見送ったようです。

さて、メイリオを適用させたい場合には、次のように「MS P ゴシック」よりも前に「メイリオ」を指定すればよいのです。

body {
  font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}

Windows VistaではInternet Explorer 7のみですが、Windows XPにInternet Explorer 7をインストールしている場合、またはWindows XPに「メイリオ」のみをインストールしているなどの環境が考えられます。

「メイリオ」の場合、「Verdana」などの欧文フォントを組み合わせる必要もありませんし、また、字間を調整する必要がもありませんので、次のように記述すれば、Windows XPのInternet Explorer 6では「MS P ゴシック」、Internet Explorer 7（Windows XP/Windows Vista）では「メイリオ」で表示されます。

body {
	font-family: "Lucida Grande", sans-serif;
}
* html body {
	font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 1px;
}
*:first-child+html body { 
	font-family: 'メイリオ', Meiryo, sans-serif;
}

なお、Mac環境では「Office 2008 for Mac」のインストール時に「メイリオ」が組み込まれます。

ページ 3 / 4

前のページ

次のページ