閲覧側のフォント設定でレイアウトが崩れる・・・メイリオに注意！

2010年05月21日, 23時40分

ホームページ制作

閲覧側の環境に配慮する上で、IE6は何度も取り上げてきました。
IE6に比較すれば若干ではありますが、Windows Vistaに絡んでの問題です。
閲覧環境の初期設定フォントは以下のようになります。（ブラウザはIE6または7）

  • XP：「MS P ゴシック」
  • Vista：「メイリオ」
  • W7：「Meiryo UI」

    • この違いをイメージにするとこんな感じ
    ※閲覧環境に依存しますので、ここで正確な再現は不可。よって、画像によりイメージとして再現

    Vistaデフォルトの「メイリオ」が他に比べ、横に広がっているのです。

    では、どんなことが起きるかと言えば・・・
    例えばテーブルで表を作り、その中に文字を組み込んだ場合、こんなことが起こります。
    ※フォントサイズは、同一指定

    メイリオを想定しないでテーブルの横幅を設定した場合、途中で改行されます。

    ホームページ側でフォントを「MS　ゴシック」（等幅）等に指定すれば問題ないという方もいらっしゃいますが・・・フォント指定は原則NG。もっともテーブルの横幅を直接指定するのもNGです。
    Web標準に準拠しつつ、配慮する・・・

    Tagged , ,