テキスト指定例リスト

■ 6. フォントファミリー指定例

【このページ内のトピック： 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】

6.1 一般フォントファミリー 6.2 和文フォント 6.3 欧文フォント 6.4 記号・その他 6.5 フォントが存在しない場合 6.6 組合せ例 6.7 総評

■ 6.1 一般フォントファミリー

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
serif		美しい日本語		Stylish English
sans-serif		美しい日本語		Stylish English
cursive		美しい日本語		Stylish English
fantasy		美しい日本語		Stylish English
monospace		美しい日本語		Stylish English

■ 6.2 和文フォント

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
"ＭＳ ゴシック"		美しい日本語		Stylish English
"ＭＳ Ｐゴシック"		美しい日本語		Stylish English
"ＭＳ 明朝"		美しい日本語		Stylish English
"ＭＳ Ｐ明朝"		美しい日本語		Stylish English
"MS UI Gothic"		美しい日本語		Stylish English
Osaka		美しい日本語		Stylish English
"Osaka−等幅"		美しい日本語		Stylish English
"中ゴシック体"		美しい日本語		Stylish English
"平成角ゴシック"		美しい日本語		Stylish English
"平成明朝"		美しい日本語		Stylish English
"細明朝体"		美しい日本語		Stylish English

■ 6.3 欧文フォント

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
Georgia		美しい日本語		Stylish English
NewYork		美しい日本語		Stylish English
Palatino		美しい日本語		Stylish English
Times		美しい日本語		Stylish English
"Times New Roman"		美しい日本語		Stylish English
Arial		美しい日本語		Stylish English
"Arial Black"		美しい日本語		Stylish English
Chicago		美しい日本語		Stylish English
Geneva		美しい日本語		Stylish English
Helvetica		美しい日本語		Stylish English
Impact		美しい日本語		Stylish English
Tahoma		美しい日本語		Stylish English
Verdana		美しい日本語		Stylish English
"Comic Sans MS"		美しい日本語		Stylish English
Courier		美しい日本語		Stylish English
"Courier New"		美しい日本語		Stylish English
"Small Fonts"		美しい日本語		Stylish English
Monaco		美しい日本語		Stylish English
Terminal		美しい日本語		Stylish English

■ 6.4 記号・その他

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
Marlett		美しい日本語		Stylish English
Symbol		美しい日本語		Stylish English
Webdings		美しい日本語		Stylish English
WingDings		美しい日本語		Stylish English

■ 6.5 フォントが存在しない場合

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
NonExistent		美しい日本語		Stylish English
"存在せず"		美しい日本語		Stylish English
NonExistent, serif		美しい日本語		Stylish English
NonExistent, "ＭＳ 明朝"		美しい日本語		Stylish English
NonExistent, "平成明朝"		美しい日本語		Stylish English
NonExistent, sans-serif		美しい日本語		Stylish English
NonExistent, "ＭＳ ゴシック"		美しい日本語		Stylish English
NonExistent, "Osaka−等幅"		美しい日本語		Stylish English

■ 6.6 組合せ例

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
Arial, sans-serif		美しい日本語		Stylish English
Arial, "ＭＳ Ｐゴシック"		美しい日本語		Stylish English
Arial, "ＭＳ Ｐ明朝"		美しい日本語		Stylish English
Arial, Osaka		美しい日本語		Stylish English
Courier, sans-serif		美しい日本語		Stylish English
Courier, "ＭＳ ゴシック"		美しい日本語		Stylish English
Courier, "ＭＳ 明朝"		美しい日本語		Stylish English
Courier, "Osaka−等幅"		美しい日本語		Stylish English
"Times New Roman", serif		美しい日本語		Stylish English
"Times New Roman", "ＭＳ Ｐ明朝"		美しい日本語		Stylish English
"Times New Roman", "ＭＳ Ｐゴシック"		美しい日本語		Stylish English
"Times New Roman", "平成明朝"		美しい日本語		Stylish English
NonExistent, Arial, serif		美しい日本語		Stylish English
NonExistent, Courier, serif		美しい日本語		Stylish English
NonExistent, "Times New Roman", serif		美しい日本語		Stylish English
NonExistent, Arial, "ＭＳ 明朝"		美しい日本語		Stylish English
NonExistent, Courier, "ＭＳ 明朝"		美しい日本語		Stylish English
NonExistent, "Times New Roman", "ＭＳ 明朝"		美しい日本語		Stylish English

■IEのフォント処理

指定内容		日本語		英語
指定無し		美しい日本語		Stylish English
cursive, sans-serif		美しい日本語		Stylish English
cursive, "ＭＳ ゴシック"		美しい日本語		Stylish English
cursive, Osaka		美しい日本語		Stylish English
NonExistent, cursive		美しい日本語		Stylish English
fantasy, sans-serif		美しい日本語		Stylish English
fantasy, "ＭＳ ゴシック"		美しい日本語		Stylish English
fantasy, Osaka		美しい日本語		Stylish English
NonExistent, fantasy		美しい日本語		Stylish English

■ 6.7 総評

上記をまとめると以下。

	NS4では日本語表示モードだと殆どのフォント指定を無視。
	IE3では「Times New Roman」「Arial」「Courier」「Courier New」が採用されると 文字化け。
	IE4では「cursive」「fantasy」が採用されると文字化け。 これらの値の前に有効な別のフォント、例えば「ＭＳ Ｐ明朝」等を指定しておく。
	IE4-6,Operaでは「font-family:欧文フォント、和文フォント」 と複数のフォントを指定しても、和文フォントが採用されない。 始めの欧文フォントのみ採用し 日本語には後続の指定を無視して 欧文フォントに合わせた和文フォントを使っている。 英語・日本語の文章、それぞれフォントのみ指定した別のタグで囲めば反映できる。

その他の注意事項：

	IE3で複数フォントを指定する場合は「font-family:"○,○"」などと 値全体を「" "」で囲むと有効になる(CSS非標準?!)。
	IE3では「font-family:'...'」と書くと後続のスタイル指定を無視。 IE3.0に対応したい場合はシングルクォテーションの使用に注意します。
	NS4では和名フォントを指定するとフォント以外の指定まで無視。
	NS4では日本語表示モードだと殆どの場合でフォント指定を無視。 NS4か否かでスタイルシートを別々に用意してもいいでしょう。
	NS6では外部スタイルシート内の和名フォント指定を無視。 「@charset "Shift_JIS";」をファイルの先頭に加える。
	IE5.5で「sans-serif」が採用されると内臓フォントによっては文字化けする。 「sans-serif」指定の前に「ＭＳ Ｐゴシック」などを必ず書いておく。
	ブラウザによってデフォルトのフォントが異なる。 NS6,Opera6,7は(英語版の場合?)明朝系、IE,NS4,NS7.0はゴシック系。 明朝系は字が小さいと読みにくい場合があるので注意する。

参考：HTML,CSSバグ＆回避法リスト

フォント指定にはブラウザ毎に特有の様々な問題があります。

	フォントの指定順に注意する。 一般フォントファミリーはできるだけ読まれないようにする。
	和文、英文 各々にフォントを指定するには 日本語・英語の部分に分け 別々にフォントを指定する。
	ブラウザ別にスタイルシートを用意する。

など工夫が必要です。

参考：ブラウザ別にスタイルシートを指定

【きぃなび情報】 ・ホーム ・使い方＆試す ・キー割当て表示			【関連リンク】 ・JavaScriptバグ＆回避法 ・HTML,CSSバグ＆回避法 ・JavaScript小技集
	テキスト指定例リスト 目次 【数字キーでアクセス】 例 ： 「2.1節」は「2｣キーを2回連打して移動。「Q or P」で戻る。 「Ctrl-矢印」でフォーカス移動。
		1. 目次 2. HTMLテキスト関連一般 3. HTML その他 4. スタイルシート フォント関連 5. スタイルシート テキスト関連 6. フォントファミリー指定例 6.1 一般フォントファミリー 6.2 和文フォント 6.3 欧文フォント 6.4 記号・その他 6.5 フォントが存在しない場合 6.6 組合せ例 6.7 総評 7. フォントサイズ指定例 8. 各種フォントサイズとブラウザ互換性 9. 縦書き（追加作成中）