「Windows Vista」に標準で搭載されるフォント「メイリオ」

これらはVistaから標準で搭載されるようになった「メイリオ」というフォントを使用したサイトです。従来までのカクカクとした文字とは異なり、曲線がなめらかでmacで見るサイトのように文字の美しいサイトになります。

↓「メイリオ」についての詳細はこちら
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%AA%E3%82%AA

そこでこの「メイリオ」というフォントを実際にサイトに設定するための方法をまとめてみました。

フォントの設定はスタイルシートに以下のように記述することで行えます。

そこで気を付けなければいけないフォント指定の基本ルール

• font-familyで複数のフォントを指定した場合、左から順番に条件にあったものを読み込む優先順位があるので、順番に気をつけないといけない。
• フォント名を指定する場合、「ＭＳ Ｐゴシック」など日本語のものや間にスペースが入っているものは引用符（”や’）で囲う。ちなみにsans-selifなどの総称ファミリー名は引用符で囲ってはいけない。
• Safariでは「ヒラギノ角ゴ Pro W3」などフォント名に日本語が含まれるものは無効になってしまう。ヒラギノ角ゴを指定したい場合は「Hiragino Kaku Gothic Pro」と表記しなくてはならない。
• Firefoxでは「Hiragino Kaku Gothic Pro」など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには『’ヒラギノ角ゴ Pro W3′, ‘Hiragino Kaku Gothic Pro’』と両方表記しなくてはいけない。
  Vistaのメイリオに対応する場合も日本語で指定する必要がある。
• Mac版Internet Explorer 5 ではフォントの複数指定が無効のため、第一候補（一番左側）のフォントが環境にインストールされていない場合は初期値のフォントで表示します。
  初期値のフォントはWindowsXPでは「ＭＳ Ｐゴシック」 、WindowsVistaでは「メイリオ」、Macでは「ヒラギノ角ゴ Pro W3」となります。
• 「Microsoft Office for Mac」をインストールすると、Macでも「ＭＳ Ｐゴシック」がシステムにインストールされてしまう。なのでヒラギノより先に「ＭＳ Ｐゴシック」の指定を持ってきてしまうと、「ＭＳ Ｐゴシック」インストールされているMacでも「ＭＳ Ｐゴシック」が反映されてしまう。

以上のことに注意し、「メイリオ」を設定するには

となります。

しかし、ここでまた問題があります。

・「Windowsにヒラギノフォントをインストールしている」というケースでは、Windowsなのに「ヒラギノ角ゴ Pro W3」で表示されてしまう。

当社のようなwebの制作会社やデザイナーにはヒラギノフォントをインストールしていることが多いのです。そこまで考慮しフォントの指定を行うのであれば、「CSSハック」を利用するかWindows用とMac用にスタイルシートを用意しなければなりません。

OSやブラウザによってここまで複雑化するため、大変悩ましい問題です。

ちなみに、スタイルシートの文字コードにより、日本語表記が文字化けし正しくスタイルを読み込めない場合があります。その場合は下記のようにフォント名を変更する必要があります。

■例

の場合、

とします。

OS間やクロスブラウザの処理には大変な手間と労力がかかりますが、誰でも問題なく見れるサイトを制作するためには、避けては通れない問題です。

参考サイト：
http://www.seo-equation.com/html/css/font-family