Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実―
この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Safariの登場など、環境が複雑化している現在、下手にfont-familyは指定しないほうがいいなと思って、ブログでのフォント指定をやめてみた。
ただ、メイリオで表示してもらいたい場合、文字コードがUTF-8では、欧文フォントが「メイリオ」、日本語フォントは「MSゴシック」などブラウザの規定のフォントになってしまうことがある。これを避けるためには、HTMLタグでlang="ja"宣言をしておくといいそうだ。
CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。
フォントを指定しない場合の問題はこれだけらしい。
Movable Typeが出た当時は、フォント指定しておかないと、テキストエリアで文字化けが発生するなんてのもあって、フォントをがちがちに指定したけど、そういう問題ももう見かけない。
IEだと希望としては1バイト文字がVerdanaで見えて欲しいんだけど、メイリオが出てきたんだし、もうVerdanaにこだわらないことにした。Verdanaはモニターでの可読性を意識した英語フォント。
ARTIFACT ―人工事実― : font-familyに指定する英語フォント
Verdanaの記事を書いたのは、2003年だった。
ここの情報にちょっと補足。
「sans-serif」のみ指定した場合、欧文フォントの違いのみ書かれていますが、日本語フォントも違うんですよね。Shift_JIS・EUC-JPの場合は「MS UI Gothic」
UTF-8の場合は「デフォルト指定されているフォント」
で表示されます。さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。
EUC-JPのほうは、全部メイリオになっているのに……。
IE6での話。複雑だ…。
CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
anon 08-03-10 (Mon) 9:42
(中略)
MacのSafariとFirefoxでは、bold体の扱いが違います。SafariではWeightを含んだフォント名を指定しなければならなかった代わりにきれいなフォントで表示される一方、FirefoxはWeightの重いフォントを使わず汚い自家製BOLD加工をしてしまうので、回避するためのCSSが煩雑でした。
これが気になるんだけど、回避策がわからないので、何とも。
そういえば、これらの記事でメイリオがOpenTypeフォントだと書かれていることがあったけど、TrueTypeである。OpenTypeのフォントの拡張子はotfでTrueTypeはttc/ttfだが、メイリオはttcである。
こうしたフォント指定で英語圏の面白い話があったのでメモ。
エコノ研究所 | Verdana
Comic Sans Cafe は Comic Sans について...
このフォントは、Windows に標準で組み込まれているフォントの中でも、最もキャッチーな見た目を持っているフォントだ。しかし、その容姿の柔らかさがライトユーザを強く惹き付けてしまうためか、やや安直に濫用されてしまっている傾向がある。英語圏の「良識ある」ユーザ達は、この "Comic Sans" に氾濫にほとほとうんざりしているようで、"Ban Comic Sans" (Comic Sans を撲滅せよ!) などと題されたジョークサイトまで立ち上げられてしまう始末だ。
日本語でも、丸文字フォントがたまに指定されているページがあって、指定されているフォントがたまたま入っていたりすると、非常に困る事態になるのだけど、英語圏だとちょっとファンシーなフォントであるComic Sans MSがWindowsに標準で入っているので、もっと被害が大きい模様。
んなことより、上のドロップダウンメニューがズレてるのを何とかしましょう。
もろもろ考え出すとキリが無いので、{ font-family: Verdana, sans-serif; }で。
[…] CSSでのフォント指定:ARTIFACT ―人工事実― […]
[…] CSSでのフォント指定:ARTIFACT ―人工事実― […]
[…] CSSでのフォント指定:ARTIFACT ―人工事実― […]
http://tinyurl.com/ydtwr69
CSSでのフォント指定