Web標準にアプローチ　〔まいまいのお宿。〕

2006/12/09

font-family の指定の仕方でフォームコントロールが化ける！

(4)

テーマ： Web標準(117)

カテゴリ： Web標準

スタイルシート＆ Web制作知識とルール総まとめ

Web標準の教科書

CSS Zen Garden book

スタイルシートスキルアップ・デザインブック（1）

スタイルシートスキルアップ・デザインブック（2）

ブラウザによって標準フォントが違うのは、当ったり前ですね。

でも、日本語圏の場合、明朝系のフォントで表示されると
とっても読み辛いと思いませんか？

そこで、CSSでゴシック系の文字を指定するために
「 font-family: "Arial", "Helvetica", sans-serif 」
としていました。

これが、もとで、悩むことになるとも知らずに（汗）

私を悩ませた font-family は、フォームを作っているときに現象として現れました。
MacのIEでやられちゃった表示は、こんな感じです（↓）

フォントファミリーで英文フォントを指定しているときのフォームコントロールの例

んもぉ、困ったもんですよ。
これが、何が原因で現れている現象なのかわからなくて
数時間悩んじゃったじゃないですか！

「 font-family: "Arial", "Helvetica", sans-serif 」

これの何がいけないかわかりますか？
ちなみに、Mac の Netscape は OK です。
Windows も IE、Opera、Firefox あたりでさらりと見たところ OK です。

"Arial" も "Helvetica" もなかったら、"sans-serif" 系のフォントを拾ってきてよね！
拾わないんです･･･それが･･･（ー"ー）

「 font-family: "ＭＳＰゴシック", "Osaka" sans-serif; 」

これじゃないと駄目なんですよ。
ニッポンジンならニッポンゴ使ってよ！ってことらしいですねぇ。ふぅ～。

大体のところをカバーした、こんな（↓）風でもOKでした。

「 font-family: "ＭＳＰゴシック", "Osaka" , "Arial", "Helvetica" sans-serif; 」

フォントファミリーさんにはやられちゃいましたよ！
私は、スタイルシートを使うときに
ユニバーサルセレクタ（*{margin:0;}という感じでアスターを使って指定する方法）で初期設定をしちゃうので
そいつが災いしているのかと思ったのです。
違った！違った！検証してみて、わかったとです！

フォームコントロール以外でこの現象は出ていないようなので
大事無い！といえば大事無いかも。
困ったことに出会ったら、この記事を思い出そうと、メモペッタンです！＾＾

「はてな」にもこの現象がエントリーされていますね。
　⇒ MacIEでの文字化け対策

■font-familyを指定するときの記述（ゴシック系フォント版）

font-family: "ＭＳＰゴシック", "Osaka" sans-serif;

または･･･

font-family: "ＭＳＰゴシック", "Osaka" , "Arial", "Helvetica" sans-serif;

※font-familyについては、下のアドレスが参考になりますよん♪
http://www.htmq.com/style/font-family.shtml

１０日ぶりの書き込みとなりました。
プログラムや新しいサイト作成のお仕事があったり
相談事や調べもの、そのほか色々で大変忙しくしています。

少しゆとりができてきたので
そろそろ年賀状のデザインを作り上げてしまわないといけませんね。

最近の私は、花札にはまっているので
花札の決まり手「猪鹿蝶」をメインにもってこようと思っています。
もしかしたら、元旦の楽天BLOGに載せちゃうかも？＾＾