ARTIFACT ―人工事実―
Logo

Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実―[↑B]
 この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Safariの登場など、環境が複雑化している現在、下手にfont-familyは指定しないほうがいいなと思って、ブログでのフォント指定をやめてみた。
 ただ、メイリオで表示してもらいたい場合、文字コードがUTF-8では、欧文フォントが「メイリオ」、日本語フォントは「MSゴシック」などブラウザの規定のフォントになってしまうことがある。これを避けるためには、HTMLタグでlang="ja"宣言をしておくといいそうだ。

CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ[↑B]

まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。

 フォントを指定しない場合の問題はこれだけらしい。
 Movable Typeが出た当時は、フォント指定しておかないと、テキストエリアで文字化けが発生するなんてのもあって、フォントをがちがちに指定したけど、そういう問題ももう見かけない。
 IEだと希望としては1バイト文字がVerdanaで見えて欲しいんだけど、メイリオが出てきたんだし、もうVerdanaにこだわらないことにした。Verdanaはモニターでの可読性を意識した英語フォント。
ARTIFACT ―人工事実― : font-familyに指定する英語フォント[↑B]
 Verdanaの記事を書いたのは、2003年だった。

Fledgling Blog: フォントの指定[↑B]

ここの情報にちょっと補足。
「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デザイナーのナナメガキ[↑B]

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[↑B]

Comic Sans Cafe は Comic Sans について...
このフォントは、Windows に標準で組み込まれているフォントの中でも、最もキャッチーな見た目を持っているフォントだ。しかし、その容姿の柔らかさがライトユーザを強く惹き付けてしまうためか、やや安直に濫用されてしまっている傾向がある。英語圏の「良識ある」ユーザ達は、この "Comic Sans" に氾濫にほとほとうんざりしているようで、"Ban Comic Sans" (Comic Sans を撲滅せよ!) などと題されたジョークサイトまで立ち上げられてしまう始末だ。

 日本語でも、丸文字フォントがたまに指定されているページがあって、指定されているフォントがたまたま入っていたりすると、非常に困る事態になるのだけど、英語圏だとちょっとファンシーなフォントであるComic Sans MSがWindowsに標準で入っているので、もっと被害が大きい模様。



Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実―[↑B]
 既にSafari+メイリオは綺麗という記事はよく書かれていたから、何の意識もせずに記事を書いていたんだけど、世の中のアンチエイリアシング嫌い派の存在をすっかり忘れていたので、ブクマコメントで「Safariのどこが綺麗なの?」と言われる始末。
 サンプル画面はうっかり黒地に白文字でその上太文字なんていうあまりよくないのを選んじゃったし…。だから文字が潰れてるからよくないと思われてしまったので、細目の文字のものを追加した。
 アンチエイリアシングはちょっと文字を太くしてくれるほうが格段に見やすいので、Safariの印象がいいんだけど、そもそもアンチエイリアシングが嫌いな人からすれば、ボケ過ぎて見えて嫌なんだろう。
 自分の場合、CRT時代はアンチエイリアシングはCRTのぼやけも相まって、ぼやけ過ぎるような印象があったけど、液晶時代になってから、液晶によってドットがくっきり見えるようになり、それを柔らかくしてくれるアンチエイリアシングが見やすいと思えるようになった。

ore_de_work ←文系適きれいさ | 理系適きれいさ→

 この辺の違いなのだろうか。
 もともとMacintoshを評価する人はデザイナーなど美的センスに厳しい人が多い訳だし、アンチエイリアシング嫌い派は確かにプログラマーが多い気はする。
 でも、ネットを見ていると技術者の人の間で、UNIXが手軽に使える環境としてのMacintoshブームがあって、そういう流れでMacintoshを使い始めた人が「やっぱり文字がぼやけていていやだ!」と言っているのは見たことがない。何らかの傾向はありそうなので気になるところ。

 自分のフォント美意識としては等幅フォント(日本語ワープロ時代の遺物の横倍角とか見たらもう!)が許せないんだけど、プログラマーの人は等幅フォントが好きな人が多くて、ここにも差が見受けられる。ソースコードは等幅の方が見やすいというのはどういう理由なんだろうか。プロポーショナルフォントがない時代からの慣れという気がするんだけど。

追記:
 太字が潰れている!という件については、潰れる場合、もう一サイズ大きくしたりして、可読性を高めている場合が多いだろう。
 だから「情報量が減ってもいいから文字を大きくして見栄えをよくしたい派」と「情報量を増やしたいので、文字が小さい場合での読みやすさ優先派」に別れるんじゃないだろうか。で、技術者には後者が多いと。



Apple Store(Japan)
 上でもリンクしているが、アップルストアの整備済製品にiPod touchが出ていた。1月から発売されているソフトウェアアップグレードが適用済みのモデル。
iPod touch 16GB [整備済製品] 41,000円
iPod touch 8GB [整備済製品] 29,300円

Amazon - Apple iPod touch 16GB MA627J/A
 Amazonでも16GBが39,800円、8GBが29,800円で売っているけど、こちらはソフトウェアがアップグレードされてない版なので注意。
 「Apple iPod touch 16GB MA627J/A」「Apple iPod touch 8GB MA623J/A」と末尾がAのものがソフトウェアがアップグレードされてない版で末尾がBがアップグレード版だ。



アップル - Safari[↑B]
 Windows版Safariは、WindowsのClearTypeを使わず、独自のレンダリングエンジンでフォントをスムージングしてくれる。MS Pゴシックのスムージングもいいのだが、一番綺麗に見えるのはメイリオだ。これはWindows版Safariから出た当時から言われていた話なんだけど、3.1が出た記念ということで。

Safari 日経BPIE 日経BP

Safari Impress WatchIE Impress Watch
※クリックで全体画像を表示
※環境はWindows XPでキャプチャー/Safariは上はフォントスムージングを弱に、下は中にしている。当初のキャプでは上の画面はスムージングを強にしていた
※液晶ディスプレイによってサブピクセルのRGBの並びが違うため、自分が見ている環境よりもぶれて見えている可能性があるという指摘があった。
Re:Windows版Safari+メイリオは綺麗 - IE6+ClearTypeのサンプル画像の表示が余計に見づらい人もいる? - 逃走航路@hatena[↑B]
 Ubuntuの標準のデスクトップ環境であるGNOMEでは、液晶のサブピクセルの順番を設定できるそうだ。
Linux Salad: フォントの表示を綺麗にしよう![↑B]

 フォントにメイリオを指定しているnikkei BPnetと指定がないらしいImpress Watchで比較してみた。左がSafariで右がIE。SafariはIEに比べて、かなり太い文字でレンダリングしているのがわかる。Safariは、WindowsのClearTypeというフォントのスムージングを使っておらず、ブラウザ自身でフォントのスムージングはしているので、このような違いが出る。フォントのスムージングは文字が細いと見えにくくなるので、確かにこうして太めに加工したほうが確かに見やすい。
 あと、メイリオ使用時の綺麗さは、ボールド書体(meiryob.ttc)が別途用意されているというところもあるのだろう。Safariで見ているとわかるのだが、MS Pゴシックを単純に太くしたボールド書体はあまり綺麗なものではない。

 最初にWindows版Safariが発表された当時は日本語表示ができなかったが、3.03からは日本語表示が問題なくなった。ただし、3.03まではテキスト入力に日本語が通らず、3.04から通るように。動作環境はWindows XP以上と指定されており、3.03はWindows 2000でも動作したのだが、3.04以降は自分の環境ではJavaScriptが使われているページを見ると落ちてしまう。JavaScriptを切れば動作する。なお、ClearTypeを搭載していないWindows2000でも、液晶ディスプレイ向けのスムージングが行われる。

 よくわからないのが、フォント指定がされていないページであっても、Safariでデフォルトフォントを設定しても、それで表示してくれるフォントと表示してくれないフォントがある。常時できないとMS Pゴシックにされてしまう。いろいろいじってみて、最終的にメイリオをデフォルトしてみた。フォント設定は、編集→設定→表示で、標準設定という設定から変更できる。
 大半のページでは、Safariで見ても、MS Pゴシックの指定が優先されてしまい、意外と綺麗ではないと思うかもしれない。しかし、Safariでメイリオを指定して、フォント指定されていないページやメイリオが指定されているページを見るとかなり印象が変わる。以下のサイトはメイリオで見られた。
読売新聞
asahi.com
Impress Watch
nikkei BPnet
マイコミジャーナル

 これまで、Windowsユーザー対策としてCSSではMS Pゴシックを指定していたが、メイリオを標準装備したVistaが登場した現在、これからは下手に指定しないほうがいいかも知れない。
※関連
CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ[↑B]

 この辺のブラウザとフォント指定を調べていたことをメモ。

 SafariがMSゴシックをスムージングしてレンダリングするので、誤解されているようだけど、MSゴシックでも本来どのサイズでスムージングできる。
Windows版Safariが「正式版」に,メニュー表示も日本語化:ITpro[↑B]

「MS Pゴシック」は,Webブラウジングでよく使われる16ポイント以下のフォント・サイズにおいて,Windows標準のアンチエイリアシング技術である「ClearType」が有効にならない。このためSafariは,ClearTypeとは別の技術でアンチエイリアシング表示を使用していると推測される。

 これはMS Pゴシックのフォント自体に、16ポイントサイズ以下において、ClearTypeが有効にならない設定がわざとされているから。
※関連
ARTIFACT ―人工事実― | Windowsのシステムフォントにアンチエイリアスをかける[↑B]

IE FG角ゴシック 日経BP 大体のフォントは似たような設定がされているが、Wordに入っているHGゴシックなどはその設定がされていない。画面はFONT GALLERYの角ゴシックを使ったもの。なぜオフにされているかというと、小さいサイズのフォントをスムージングするとCleartTypeでは薄く見えて実用に耐えないからだ。
※参考
航海日誌: Safari 3 for Windowsの表示[↑B]
 Acrobat Readerなど小さいサイズでもフォントスムージングを行ってくれるアプリケーションはあるのだが、Windows標準のレンダラーに頼ると、小さいサイズはフォントスムージングが切られてしまう。

 なお、それらを解決するためにWindowsのフォントレンダリングを乗っ取るgdi++.dllがある。ただし、使うと遅くなるようだ。
gdi++.dll[↑B]

 WindowsでOpenTypeのフォントを設定できるブラウザは限られていて、FirefoxとOperaで、IE6とSafariは使えない。IE7はわからず。IEはともかく、SafariでOpenTypeを使えないというのはちょっと不思議だった。

※関連
メイリオのレンダリングはSafariが美しい | BLOG × WORLD ENDING[↑B]
2007年12月の道具としてのパソコン・メイリオとアンチエイリアス[↑B]
 Windows版Safariとメイリオの話。

MSのクリスマス・プレゼント?,XPでも「メイリオ」が正式に利用可能に:ITpro[↑B]
 これまで正規のライセンスでメイリオを使うのは難しかったが、Visual Studio 2008 Express Editionをインストールすれば、正規に使用できる。

なつみかん。 | メイリオとヒラギノを比較する[↑B]
YOPPA BLOG ? 明瞭[↑B]
 メイリオとヒラギノ、MSゴシックなどのフォント比較。
蕎麦処 ぱろある亭: メイリオ[↑B]
 OSXではメイリオに埋め込まれたTrueTypeのヒンディング情報を使わずに、独自でレンダリングするため、OSXでは綺麗に見えるという話。今回のSafariもそこが関係しているのだろう。



 2006年に携帯電話を903SHというハイエンド機種に変更し、2007年に今更なW-ZERO3初代を入手し、それらをよく使うようになっての感想。携帯電話とPCの関係について最近考えていることをまとめてみる。

 PDAを使っている人ならよく知っているだろうが、2000年代前半のPDAという言葉が生きていた頃、WebサービスではPDA向けに情報量を減らしたPDA版がよく用意されていた。大半のPDAがQVGAという解像度だったので、それに最適化されたページだったのが、これはPDAの失速とともに消えてしまった。
※参考 useDDIpocket for PDA[↑B]
この記事の続きを読む »


About

1997年から運営している個人サイト。2002年にブログ化。オタクネタを中心で書いていたが、最近はウェブサービスの話題が多い。
サイトの詳細
旧Movable Type版(2002/12から2006/11まで)
2002/12以前

Twitter Flickr
ARTIFACT@ハテナ系
はてなダイアリー
ARTIFACT BOOKMARK
はてなブックマーク
ARTIFACT clipper
tumblr
ARTIFACT@photologue
tumblrで運営している写真ブログ

AD

Recommend


41 queries. 0.333