文字化け対策

次のようにfont-familyを設定したとします。

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",   /* 欧文用 */
    "平成明朝","ＭＳ Ｐ明朝",   /* 和文用 */
    serif
}

CSS1/CSS2の仕様書を読むと、CSS1では一つの要素につき一つのフォントが採用され、CSS2では同時に複数のフォントを採用させることができるということのようです。要素のフォントが決定される過程には、font-style，font-variant，font-weight，font-sizeといった条件も絡んでくるので複雑なのですが、難しいので無視しています。font-familyは継承しますので、上書きしない限り子要素でも同じフォントが使用されます。

上記の例では、CSS1のみサポートしているUAなら、Impact, Chicago, Comic Sans MSが欧文フォントであることから、日本語を含んでいる要素には採用されません。CSS2をサポートしていれば、欧文フォントと、要素に日本語が含まれている場合は和文フォントも同時に採用されます。serifは髭飾りのあるフォントファミリの集合体ですので、指定したフォントが使用できない場合や、採用したフォントで表示できない文字用のフォントがここから採用されます。最終的には、UAのデフォルトフォントも利用されることになっていますので、機種依存文字を使わない限りはきちんと表示されるはずです。

しかし、仕様とは異なり、各ブラウザの実装は（日本語ページでは）以下のような感じです。

WinIE4/5

一つの要素につき一つのフォントしか採用されない。欧文フォントが採用された要素では、表示できない文字はブラウザに設定されている日本語用プロポーショナルフォントで表示される。一般フォントファミリは不確実。

IE5以降は"MS PGothic", "MS Mincho"などの英字表記も認識する。

WinIE5.5/6

一般フォントファミリへの対応が良くはなってはいるが、相変わらず中途半端。確認したWindows 98SE/Me/2000/XPのうち、Me版は一般フォントファミリであるsans-serifの扱いがおかしい。

WinNC4

日本語を含む宣言は全て無視され、日本語ページでは欧文フォントはほとんど採用されない。和文フォントで、名前に日本語の含まれていないフォントなら大丈夫。

MacIE4/5

基本的に、一つの要素につき一つの和文フォントが採用される。ただし、要素のlang属性を欧米系に設定すれば欧文フォントでも採用される。一般フォントファミリは不確実。

  • フォームコントロール（INPUT, TEXTAREAなど）に欧文フォントを設定してしまうと、文字化けする可能性があります。
  • MacIE5: lang属性によって欧文扱いされている文字の後に、日本語と判断できる文字（lang="ja"でも可）が現れないままにフォームコントロールが現れたりファイルが終了していると、言語判定に不具合が生じる場合が有ります。lang属性が正しく継承しません。
MacNC4

日本語を含む宣言が全て無視されるのはWin版と同じであるが、日本語ページでも欧文フォントが採用される。ただし、使用されている文字に関係無く採用するので、日本語の含まれている要素に欧文フォントが採用され、文字化けする場合がある。UTF-8で符号化すると、Win版でもOSによっては同様の現象が発生する。

Netscape6 (Win & Mac)

一般フォントファミリであるcursive, fantasyに和文フォントが割り当てられていないような気もするが、一つの要素に複数のフォントを採用させることも可能になった。良好。

※ Macでフォームコントロールの日本語が文字化けするかどうかは、Text Encoding ConverterのバージョンやOS標準のコントロールを利用しているかどうかによって異なるようです。欧文フォントを指定したり、UTF-8で符号化すると化けやすいです。

※ [IE5]sans-serif を指定した HTML ファイルを表示すると文字化け （MS技術情報） この情報に従って特定のフォントを削除しても、OS付属の和文フォントが選択対象に含まれていないのは直らなかった（Windows Me IE 5.5/6.0）。

以下のサンプルで設定しているフォントファミリ名は、効果がわかりやすいように滅茶苦茶な組み合わせです。

1. 欧文フォント > 和文フォント > 一般フォントファミリ

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    "平成明朝","ＭＳ Ｐ明朝",  /* 和文用 */
    serif
}

サンプル1-1: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    Osaka,"ＭＳ Ｐゴシック",  /* 和文用 */
    sans-serif
}

サンプル1-2: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    Osaka−等幅,"ＭＳ ゴシック",  /* 和文用 */
    monospace
}

サンプル1-3: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

2. 欧文フォント > 名前に日本語が含まれていない和文フォント > 一般フォントファミリ

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    Osaka,"MS UI Gothic",  /* 和文用 */
    sans-serif
}

サンプル2: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

3. 和文フォント > 一般フォントファミリ

P { 
  font-family:
    "平成明朝","ＭＳ Ｐ明朝",  /* 和文用 */
    serif
}

サンプル3-1: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
    Osaka,"ＭＳ Ｐゴシック",  /* 和文用 */
    sans-serif
}

サンプル3-2: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
    Osaka−等幅,"ＭＳ ゴシック",  /* 和文用 */
    monospace
}

サンプル3-3: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

4. 名前に日本語が含まれていない和文フォント > 一般フォントファミリ

P { 
  font-family:
    Osaka,"MS UI Gothic",  /* 和文用 */
    sans-serif
}

サンプル4: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

5. 一般フォントファミリ

P { font-family: serif }

サンプル5-1: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { font-family: sans-serif }

サンプル5-2: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { font-family: cursive }

サンプル5-3: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { font-family: fantasy }

サンプル5-4: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { font-family: monospace }

サンプル5-5: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

6. 欧文フォント > 一般フォントファミリ

P { 
  font-family:
  Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
  serif
}

サンプル6-1: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
  Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
  sans-serif
}

サンプル6-2: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
  Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
  cursive
}

サンプル6-3: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
  Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
  fantasy
}

サンプル6-4: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

P { 
  font-family:
  Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
  monospace
}

サンプル6-5: 日本語表示テスト。The quick brown fox jumps over the lazy dog.

7. 欧文フォント > 和文フォント > 一般フォントファミリ （英単語にlang属性を設定）

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    "平成明朝","ＭＳ Ｐ明朝",  /* 和文用 */
    serif
}

サンプル7-1: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial, /* 欧文用 */
    Osaka,"ＭＳ Ｐゴシック",  /* 和文用 */
    sans-serif
}

サンプル7-2: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

P { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    Osaka−等幅 ,"ＭＳ ゴシック",  /* 和文用 */
    monospace
}

サンプル7-3: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

8. 一般フォントファミリ （英単語にlang属性を設定）

P { font-family: serif }

サンプル8-1: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

P { font-family: sans-serif }

サンプル8-2: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

P { font-family: cursive }

サンプル8-3: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

P { font-family: fantasy }

サンプル8-4: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

P { font-family: monospace }

サンプル8-5: 日本語表示テスト。 Japanese( lang="ja" ) English( lang="en" )

9. フォームコントロールのテスト

.samp1 { 
  font-family:
    Impact,Chicago,"Comic Sans MS",Helvetica,Arial,  /* 欧文用 */
    serif
}

.samp2 { 
  font-family:
    "平成明朝","ＭＳ Ｐ明朝","Osaka−等幅","ＭＳ ゴシック"  /* 和文用 */
}

.samp3 {
  /* フォント指定なし */ 
}

.samp3 {
  /* フォント指定なし
     FORM lang="ja" */
}
XHTMLバージョン | CSS1 主要属性対応表