2012-12-28

【CSS】font-familyを指定するな。ユーザー選択に任せよ。

参照:[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ!


上記記事にも直接コメントしましたが、これ以上他人様のブログで自説を展開するのもよろしくありませんので、ここに書きます。


まず前提として、ぼくは
「日本語文章に欧文フォントを指定すべきではない」
と考えています。

理由は上記記事のコメントにも書きましたが、
高さ・ウェイト・字幅・ベースライン等が揃わず
非常に不格好になる。

ためです。



具体例を出しましょう。

「Windows7 + IE9」
「デフォルトフォントにMS Pゴシック指定 + ClearType有効」
環境において、どのように表示が不格好になるのか確認します。

font-family: Arial, sans-serif;

とした際のサンプルが以下になります。




これを見て、どうでしょう?
気にならない方もいらっしゃるのでしょうが、
僕に言わせれば「めちゃめちゃ」です。

たとえば3行目を見てみます。

半角括弧がArialで描画され、続く「英」はMS Pゴシックです。
文字の高さが非常に不揃いになっていますね。




その箇所をドラッグで選択してみたのが上図になります。
フォントの境目で高さが変わっているのがよりはっきりしました。

では、このまま表示を拡大していきます。




おやおや太さがおかしくなってきました。
(実は1枚目の画像も同じ状態です)

これが最初に書いた「ウェイトが揃わない」という現象です。
欧文フォントのほうがClearTypeが効き始めるポイントが小さいため、
このようなことが発生します。
英字だけが妙に強調されて見え、かなりの不統一感があります。





さらに拡大したところで、ようやく太さの違いが見えなくなりました。
文字サイズが大きくなったことで、
MS PゴシックにもClearTypeが適用されるようになったのです。

しかし最初の、
高さが揃わない問題については未解決のままです。



Arial+メイリオならどうか

最近ではこちらの環境の方が優勢でしょうか。
ブラウザのデフォルトフォントでメイリオを指定した場合の想定です。

CSSは、

font-family: Arial, Meiryo, sans-serif;

となります。





一見してわかるとおり、ウェイト(太さ)が揃っていません。

また、メイリオの「懐が広い」字形に対し、
Arialは狭く、余裕が無いように見えます。

つまり、どうしてもデザイン的にちぐはぐな印象
を与えてしまいます。


先ほどと同様にテキスト選択してみますと、






先ほどよりは目立ちませんが、やはり高さの不揃いもそのままです。



Sans-serifのみを指定すればどうか

CSSを以下のように指定することで、

font-family: sans-serif;

IE9はユーザーが設定で指定したフォント
(この場合はMS Pゴシック)を使って描画を行います。

なお、「なぜ font-family: 'MS Pゴシック' としないのか」ですが
「フォントを指定できるのはユーザーのみ、の状態が本質だから」です。

ではサンプル画面です。






いかがでしょう。
フォントの混在が無くなったため、統一された字幅・高さ・太さとなりました。

この場合はフォント設定がMS Pゴシックとなっているせいで
いまいちな表示結果となっていますが、
メイリオやヒラギノに設定を変更すれば、当然きれいに表示されます。


さらに、以下のように拡大していっても
ウェイトの不揃いが出ません。






高さも当然揃っています。






さらに拡大して、全体にClearTypeが適用されるサイズになりました。
きちんと揃っています。






いかがでしょう。
日本語文章に欧文フォントを指定してしまった場合の弊害について、
ご理解いただけたでしょうか。

MacOSではフォントの描画がずっと素敵なので、
Windowsほどの違いは見出せないかもしれません。

しかしそれは、目立たないだけで、
大なり小なり発生している問題
です。


企業サイトなどでも、欧文にのみClearTypeが効いてしまって
和文とウェイトが倍ほども違っていることは多いです。

英字だけを恒常的に強調したいのであれば別ですが……
正直、見る気をなくさせられます。

「自分の環境できれいに表示されたからそれでいい」では、
ただのデザイナーの自己満足ですよね。



ユーザースタイルシートについて

このようなことをなんとなくコメントしたところ、
「ユーザースタイルシート使えばいいじゃんか」
とのお答えをいただきました。

ユーザースタイルシート、あるいは、
「Webページの指定フォントを無効にする」のようなオプションは、
確かに存在はします。

ですが、使ってみた経験のある方ならば
これらは「できる限り使用を避けたい代物」
という感覚に同意いただけると思います。

もともとユーザー補助オプションなのです。
見た目を多少犠牲にしてもいい、という場合の非常手段です。

その結果、たとえば2ch系サイトなどで、AAが盛大にズレます。
ちょっと凝ったことをしているサイトでも、もれなくデザインが壊れます。
使っていたころもありましたが、結局挫折しました。



さいごに

そもそも、FontFamilyに特定のフォント名をハードコードする
というのは、立派な環境依存の実装例です。
つまり、特定の機種やOSでの表示のみが想定された記述方法です。

サイト側が環境依存をわざわざ実装しておきながら
ユーザー側でスタイルシートの上書きを薦めるというのは
Webの思想からはかけ離れていると言わざるをえません。



【aタグtarget=”_blank”は使うべきではない】

なぜ?
→ リンクを新しいタブで開くかどうかはユーザーが決めるべきだから。

ずっと昔から、Webとはこういうものだったはずです。



「ぼくのかんがえたさいきょうのfont-familyしてい」だからこれでいいんだ!
という主張に対しては、もし

「ぼくのかんがえたさいきょうのセキュアログインフォーム(ただし実際は環境依存でセキュリティリスクあり)」
だったら? その方法が拡散してしまったときの責任は?

とだけ書いておきます。

12 個のコメント。書きます?:

wada811 said...

記事を拝見させていただきました。

「日本語文章に欧文フォントを指定すべきではない」とお考えのようですが、
では和文フォントのみを指定すれば良いのではないのでしょうか?
そうすれば「高さ・ウェイト・字幅・ベースライン等が揃わず非常に不格好になる。」ということもないと思います。

「フォントを指定できるのはユーザーのみ、の状態が本質だから」とのことですが、
フォントを指定できると知っていて、それを行なっているユーザーがどれだけ居るのでしょうか。
大多数のユーザーは設定方法も知らず、デフォルト設定で表示されることになります。
ご自身のブログをIEで見たことはありますでしょうか?
本記事の記事タイトル部分は font-family: Serif; としか指定されておらず
Windows 7のIE9(デフォルトフォント設定のMS Pゴシック ClearType有効)では択の字など酷い有様です。
こちらのページに再現しましたが、適切にフォント指定してあればまともな表示になります。

Sans-serif についても上記のページに再現しましたがデフォルト設定のIEでは
Sans-serif のみの指定では本記事のように英字の高さや拡大時のウェイトが揃いませんでした。
むしろ、和文フォントを指定した場合のほうが高さやウェイトの不揃いはなくなりました。
この不揃いを気にするならば Sans-serif についても和文フォントのみを指定すれば良いということになるかと思いますがいかがでしょうか?

ユーザースタイルシートについては使用したことがなかったのでそのようなデメリットがあるとは知りませんでした。
しかし現状、大多数のユーザーがフォントを指定できるとすら知らない中でフォントをユーザーの選択に任せる事はできないと思います。

> そもそも、FontFamilyに特定のフォント名をハードコードするというのは、立派な環境依存の実装例です。
> つまり、特定の機種やOSでの表示のみが想定された記述方法です。
とのことですが、フォントを総称ファミリで指定することは
むしろユーザーのブラウザやフォントのインストール状況によって表示が変わるという環境依存を放置することであると思います。
環境依存による表示の違いをなるべく少なくために
多くのユーザーにインストールされている似たようなフォントを複数指定しているのだと思いますがいかがでしょうか?
環境依存が嫌ならば最近流行り始めたのWebフォントが普及するのを待つしかないかと思います。

やみさんはフォントについてかなりこだわりがあるようなので
自分の環境で綺麗なフォント表示がしたいのならば
以下の記事のように@font-faceを使ってローカルのフォントファイルで表示を置き換えるのが良いのではないでしょうか?
さらばMS ゴシック/MS Pゴシック! Windows版Google Chromeできれいなフォント表示を実現する - takepierrot Editor Note http://takepierrot.hatenablog.jp/entry/20120107/1325907236
特定フォントだけを置換できるらしいので、
ユーザースタイルシートで!importantでフォント指定するよりかはデザインが壊れたりはしないのではと思います。
2ch系サイトなどのAAがズレるとのことですが、
このようなサイトが総称ファミリのみの指定だった場合に特定フォントに表示を依存するAAがズレないのか、
@font-faceでフォントを置換することでAAがずれずに表示できるのかは気になるところです。

最後にまとめますと、意図したフォント表示、大多数のユーザーがまともに見れるフォント表示が目的なので
フォントにこだわりのあるユーザーについては我慢していただくしかないのではないかなぁと思います。

やみ said...

まずはコメントいただきありがとうございます。


>ご自身のブログをIEで見たことはありますでしょうか?
>本記事の記事タイトル部分は font-family: Serif; としか指定されておらず
>Windows 7のIE9(デフォルトフォント設定のMS Pゴシック ClearType有効)では択の字など酷い有様です。

そうですね。IEではひどい有様です。
(そもそもSerif指定してるのにゴシック出してくるなんて欠陥品もいいところです)
しかしそれを見て「きたねえな」と思う人であれば、
遠からずブラウザの設定を変更するでしょう。

そしてそのとき、CSSで指定されている和文フォントが邪魔になります。
「font-family: メイリオ, sans-serif;」とした場合、
ユーザーがsans-serifにどんなに素晴らしいフォントを設定していても、
メイリオが優先されてしまうからです。


もうひとつ。
たくさんのサイトが様々にフォント指定をしてくれると、
PCに大量のフォントをインストールしているユーザーが困ります。
「印刷物デザインにはいいけどWeb閲覧には使いたいと思わないフォント」
というものが意外に多いため、どうしても読みづらいフォントに遭遇してしまうのです。

(海外サイトなどで本文にComic SansやImpactフォントが使われていて
うざったく感じた経験などありませんでしょうか? あんな感じです)

つまり、ユーザーの所持しているフォントセットが大きいほど、
意図しない表示となる可能性が高いのです。
「font-family: ヒラギノ, メイリオ」
「font-family: メイリオ, ヒラギノ」
という2つのサイトがあったとして、
ヒラギノもメイリオも持っているけどWebにメイリオはちょっと……
という人が損してしまいます。
好みのフォントを使いたい人ほど好みのフォントが出ないというアレな状況なのです。

----

>デフォルト設定のIEではSans-serif のみの指定では本記事のように英字の高さや拡大時のウェイトが揃いませんでした。
これはIEのバグ?まあ不思議な挙動でして、Unicodeで書かれたページは
Sans-serifとしてあっても英字フォントが別のなにかに強制されてしまいます。
そのせいかと。

----

>フォントを総称ファミリで指定することは
>むしろユーザーのブラウザやフォントのインストール状況によって表示が変わるという環境依存を放置することであると思います。
フォントにはライセンスがあるので、
(MSゴシックをMacに持っていけばライセンス違反ですね)
「すべての閲覧環境に用意されている書体」は存在しません。
つまり環境依存は放置するしかないのです。
WinとMacはまだいいですが、ではLinuxは? Androidは? とキリがないのです。

加えて「インストール状況によって表示が変わる」は、
先に述べたように個別ファミリを指定した場合であっても発生します。

>環境依存による表示の違いをなるべく少なくために
>多くのユーザーにインストールされている似たようなフォントを複数指定しているのだと思いますがいかがでしょうか?
欧文フォントであればこの意味はあります。Helvetica≒Arialみたいな例も多いですからね。
しかしメイリオとMSゴシックとヒラギノはどれも全く似ても似つかないでしょう。
そもそも設計思想からして違います。ヒラギノはもともと印刷物志向、
MSゴシックはとりあえず表示できればいいやのビットマップフォント、
メイリオは字形潰してでも視認性を高めようというコンパクトUI用です。
適する環境からして違うのです。一緒くたに指定してしまうのは乱暴です。
さらにこれらのフォントの英字とArialやVerdanaの字形がまた似ても似つきません。
本来、混植というのはもっとずっとデリケートなものです。

----

>自分の環境で綺麗なフォント表示がしたいのならば
>以下の記事のように@font-faceを使ってローカルのフォントファイルで表示を置き換えるのが良いのではないでしょうか?
@font-faceというのは知りませんでした。
これまでフォント指定名の置き換えはProxomitronなんかを使っていました……
これはChrome限定というのが痛いところですかね。
あとは自分がある程度好きにいじれるマシンでなければ使えない点ですか。


>環境依存が嫌ならば最近流行り始めたのWebフォントが普及するのを待つしかないかと思います。
Webフォントは良いですね。
Winですとレンダリングエンジンの低品質さが足を引っ張りますが、
MacTypeなんかを併用すると悪くない風になります。
クロスブラウザでの標準化がしっかり進んでくれることを祈るばかりです。

というか、普及を待つ ではなく、自サイトにも導入する、が正確ですね。
どうせ導入してもWinでは今以上に小汚くしか表示できないのでアレですが。

----

>最後にまとめますと、意図したフォント表示、大多数のユーザーがまともに見れるフォント表示が目的なので
>フォントにこだわりのあるユーザーについては我慢していただくしかないのではないかなぁと思います。

僕としては、「大多数のユーザーがまともに見れる」が目的なら
・フォントにこだわりのない層はsans-serif = メイリオ/ヒラギノ
・こだわる層はsans-serif = 自分で選ぶ
で良いんじゃないかなぁと思うのですが……

・フォントにこだわりのない層にはメイリオ/ヒラギノを指定
・こだわる層にもメイリオ/ヒラギノを指定
って意味がわかんなくないですか?
上のひとたちの表示、前と変化ないじゃないですか……
それで下の人がメイリオとかArial押し付けられているわけで……
どうも納得が行きません……

Takumi WADA said...

> しかしそれを見て「きたねえな」と思う人であれば、
> 遠からずブラウザの設定を変更するでしょう。
個人のブログならコレでも問題ないでしょう。
大きな割合を占めるIEユーザーの表示を酷いままでユーザー任せにできない場合は
やはり開発者側で最低限のフォント指定をしなくてはならないと思います。

----

> >デフォルト設定のIEではSans-serif のみの指定では本記事のように英字の高さや拡大時のウェイトが揃いませんでした。
> これはIEのバグ?まあ不思議な挙動でして、Unicodeで書かれたページは
> Sans-serifとしてあっても英字フォントが別のなにかに強制されてしまいます。
> そのせいかと。
そうなりますと他のブラウザでは日本語と英字の不揃いが起きないので
記事の説得力がなくなると思いますがどうでしょうか?

----

> 「すべての閲覧環境に用意されている書体」は存在しません。
> つまり環境依存は放置するしかないのです。
それでもWin/Macのブラウザ間の表示の差は無くせるかと思います。
> WinとMacはまだいいですが、ではLinuxは? Androidは? とキリがないのです。
スマホ環境でのフォント指定については、また考えたいところです。
Linuxなどは割合的に少ないので総称ファミリで対応かと思いますね。

> 一緒くたに指定してしまうのは乱暴です。
そうですね。日本語フォントについてはぜんぜん違うフォントですね。
フォントに詳しくないのでそれらに似たようなフォントを知らないので指定できなていないです。
> さらにこれらのフォントの英字とArialやVerdanaの字形がまた似ても似つきません。
> 本来、混植というのはもっとずっとデリケートなものです。
メイリオの英字とVerdanaは似ていると思いましたが、組み合わせて指定はできないので難しいですね。
サンプルページを作ってIEで不揃いが起きるので和文フォントのみで指定するのが良いと思いました。

----

> @font-faceというのは知りませんでした。
> これはChrome限定というのが痛いところですかね。
@font-faceはCSSで指定するのでChrome限定ではなくユーザースタイルシートが指定できるブラウザなら使えます。

> クロスブラウザでの標準化がしっかり進んでくれることを祈るばかりです。
> というか、普及を待つ ではなく、自サイトにも導入する、が正確ですね。
個人のサイトに導入するのでしたら問題ないでしょうが、
そうでない場合はプライオリティの低いフォント指定に検証などの時間もコストもかけられないでしょうから
クロスブラウザでの標準化がしっかり進まないことには導入というのは難しいと思いますね。

----

> ・フォントにこだわりのない層にはメイリオ/ヒラギノを指定
> ・こだわる層にもメイリオ/ヒラギノを指定
> って意味がわかんなくないですか?
IEでの日本語と英字の不揃いとブラウザ間の表示の差異があるからですね。
フォントを指定しておけば最低限同じOSでは同じ表示になるので指定しておくメリットはあるかと思います。
開発者側からすると制作したページがブラウザやフォント指定によって意図しない表示になることは避けたいことです。
個人のサイトでしたらSans-serif指定でどんな表示になっていようが問題ないかと思いますが、
やはり開発者からすると何らかのフォントを指定しておくことがベターということになります。

やみ said...

>> >デフォルト設定のIEではSans-serif のみの指定では本記事のように英字の高さや拡大時のウェイトが揃いませんでした。
>> これはIEのバグ?まあ不思議な挙動でして、Unicodeで書かれたページは
>> Sans-serifとしてあっても英字フォントが別のなにかに強制されてしまいます。
>> そのせいかと。

>そうなりますと他のブラウザでは日本語と英字の不揃いが起きないので
>記事の説得力がなくなると思いますがどうでしょうか?

なくなりません。
欧文と和文に別々のフォントに指定した場合、「どのブラウザでも」不揃いが発生します。
加えてIEでは和文のみ指定した場合でもUnicodeで不揃いとなります。



----


>> 「すべての閲覧環境に用意されている書体」は存在しません。
>> つまり環境依存は放置するしかないのです。

>それでもWin/Macのブラウザ間の表示の差は無くせるかと思います。

無理です。
Macのヒラギノに相当するウェイト・デザインのゴシック体は
Windowsには入っていません。
どんなCSSを書いても、WindowsとMacの表示差は縮まりません。

さらに。
たとえまったく同じフォントファイルを描画させたとしても
Macのような高品位な表示をWinは実現できません。
文字のフチがガタガタになります。
この品質低下は小ポイント文字ほど顕著です。
つまりWebの本文書体では最悪の品質となります。

もう一度言います。
無理です。


----


>メイリオの英字とVerdanaは似ていると思いましたが、組み合わせて指定はできないので難しいですね。
メイリオは本文でも述べたようにふところの広い字形なので、
ArialやVerdana等ごくふつうのサンセリフとはあまり合致しません
(そこを了解した上での混植もありますけれど、今回デザインではなく本文なので……)。

メイリオはUI用フォントであって本文書体ではないのでCSSで指定するのはためらわれますが、
あえて使うとすればメイリオ単独、もしくは欧文のSegoeと合わせるのが良いでしょう。
Segoeは英語版WindowsのUIフォントです。字形はメイリオの英字とよく似ています。


>サンプルページを作ってIEで不揃いが起きるので和文フォントのみで指定するのが良いと思いました。
そうですね。少しでも不揃いを減らすためには和文フォントのみ指定が落し所ですかね。


----


>@font-faceはCSSで指定するのでChrome限定ではなくユーザースタイルシートが指定できるブラウザなら使えます。

いいえ。
この書き方はChrome用のWebFont表記なので、
けっきょくWebFontの標準化が中途半端な以上Chrome限定です。

(よしんば同じ書き方がFirefoxやIEで使えたとしても、
ローカルのフォントまで読みに行ける仕様かどうかは別の話)



>個人のサイトに導入するのでしたら問題ないでしょうが、
>そうでない場合はプライオリティの低いフォント指定に検証などの時間もコストもかけられないでしょうから
>クロスブラウザでの標準化がしっかり進まないことには導入というのは難しいと思いますね。

現状でもクロスブラウザ対応のWebFont指定方法は存在します。
単に複数ブラウザ用の指定を列挙するだけです。すぐできますよ。
むしろ問題は後述するWinの表示品質と、ページ表示までの待ち時間でしょうね。


----


>> ・フォントにこだわりのない層にはメイリオ/ヒラギノを指定
>> ・こだわる層にもメイリオ/ヒラギノを指定
>> って意味がわかんなくないですか?

>フォントを指定しておけば最低限同じOSでは同じ表示になるので指定しておくメリットはあるかと思います。
>開発者側からすると制作したページがブラウザやフォント指定によって意図しない表示になることは避けたいことです。
>やはり開発者からすると何らかのフォントを指定しておくことがベターということになります。

悪い言葉をつかうと、最低限指定はしていますよ? という免罪符のためですね。
コーポレートサイトと個人サイトではまた事情も違うのでしょうが。

しかし、「最低限同じOSでは同じ表示に」はなりません。
IEには前述のバグがありますし、OSの設定によりClearTypeが無効ということもあります。
この場合メイリオであっても表示はガタガタになります。

同じマシンでもブラウザによって不揃いになり、
さらに同じOS間でもガタガタの人とそうでもない人が出ます。
開発者はそれを把握できませんし、改善できるのは閲覧者だけです。


----


Mac, Linux, スマホなど = どのフォントを表示しても大体綺麗
Win = どのフォントを表示しても汚い、メイリオがClearTypeでギリギリ許容範囲

正直、Winのテキストエンジンが刷新されてLinux並の表示品位になれば、
すぐにでも全面WebFontに置き換えができる気がします。

Anonymous said...

DTP人間なんで、webはさっぱりですが、DTPにおいてすら欧文、和文で別々のフォントを使用する(混植)はかなり細かく調整が必要だし、そもそもデザイナー間でも解釈がいろいろあったりするのに、それをwebでやろうというのはどうなんでしょうね?
JAVA Scriptを駆使すれば可能なのかもしれませんが。
上記の指定も、印刷表現という全くの静的な状態だから可能なのであって、これが動的というか、ユーザー環境によりどうなるかわからないという条件だったら無理で、A4をA3にしてという依頼ですら組み直ししないと行けないです。
ゴシックか明朝かの指定にとどめておくのがせいぜいなんじゃないかと思いますけど。e-Pubのほうでもやっと縦組みが出来るようになったところですよねぇ。

あと、フォントもバージョンアップで手が入っている場合がありますので、同じOSだからといって同じ表示なるとは限らないと思います。N対応フォントとそれ以前では、フォント名が一緒でも字体が違いますし、それ以外でもデザインやらツメやらが違います。

やみ said...

ぼくもそう思います。

とりあえずWebのひとというのは、DTPのひとから見たら卒倒するぐらい
フォントの扱いが適当ですね。

そもそも「混植」という概念すら知らない人が多そうです。
ウェイトの不揃いなども言われてはじめて気付くレベルでしょうかね……

文字は詰めるものという認識がないので、ほとんどベタ組みです。
(ロゴなどで画像化してあってもベタは多いです)

そういえばフォントのバージョンで字形は変わりますね。
OS添付フォントもJIS2004対応などがありましたし。

jsでタイポグラフィを綺麗に揃える手段などはそろそろ出てきても良さそうです。
欧文専用であればすでにあったかもしれません。

しかし現状、Windows×和文の描画品質が最低なので、混植以前に問題山積の様相です。
OSとブラウザの組み合わせによっては、OpenTypeフォントを一部もしくはまったく扱えなかったりします。

Takumi WADA said...

> なくなりません。
> 欧文と和文に別々のフォントに指定した場合、「どのブラウザでも」不揃いが発生します。
> 加えてIEでは和文のみ指定した場合でもUnicodeで不揃いとなります。
こちら私の勘違いでした。確かに不揃いが生じています。

----

>それでもWin/Macのブラウザ間の表示の差は無くせるかと思います。
こちらについて誤解を招く表記をしてしまいました。
Win/Mac間ではなく、ブラウザ間の表示の差についてでした。

----

> メイリオはUI用フォントであって本文書体ではないのでCSSで指定するのはためらわれますが、
> あえて使うとすればメイリオ単独、もしくは欧文のSegoeと合わせるのが良いでしょう。
> Segoeは英語版WindowsのUIフォントです。字形はメイリオの英字とよく似ています。
なるほど、勉強になります。

> >サンプルページを作ってIEで不揃いが起きるので和文フォントのみで指定するのが良いと思いました。
> そうですね。少しでも不揃いを減らすためには和文フォントのみ指定が落し所ですかね。
やはりそうなんですね。他のコーダーの指定で和文フォントのみが指定されている理由がわかりました。

----

> >@font-faceはCSSで指定するのでChrome限定ではなくユーザースタイルシートが指定できるブラウザなら使えます。
> いいえ。
> この書き方はChrome用のWebFont表記なので、
> けっきょくWebFontの標準化が中途半端な以上Chrome限定です。
例示したサイトの書き方ですと、そうですね。
下でおっしゃっているようにクロスブラウザ対応のWebFont指定方法で指定する想定でChrome限定ではないと書きました。

> 現状でもクロスブラウザ対応のWebFont指定方法は存在します。
> 単に複数ブラウザ用の指定を列挙するだけです。すぐできますよ。
安全な@font-faceの書き方(抄訳)にあるような指定ですよね。
この指定方法はベンダープレフィックスつけまくりの指定のようなものなので、通常のサイト制作に使うのは結構冒険気味ですね。
> むしろ問題は後述するWinの表示品質と、ページ表示までの待ち時間でしょうね。
このへんのリスクやデメリットを考慮した上でデザインをこだわるならWebFontの使用は考えられるでしょう。
実際はデザイン寄りの文字は画像で対応してしまうのでWebFontを使用する機会は相当限られますが…。

----

> 悪い言葉をつかうと、最低限指定はしていますよ? という免罪符のためですね。
> コーポレートサイトと個人サイトではまた事情も違うのでしょうが。
最初から前提条件として含まれていなかったのですが、言ってしまえばそういうことになりますね。
クライアントも開発者もDTPの人のようにフォントについて詳しくないのでリスクを取らないためにそうなってしまうと思います。
私のような弱小ブログの記事がたくさんPVを集めるくらいですから、
クライアントも詳しくなくてフォントに関して何も言わないので困ったWeb開発者が多いのでしょう。
私もその一人で、正直言うと混植で不揃いが出るというのを今回初めて知りました。
10000人以上が見た私のあの記事で混植について言及したのはやみさんを含め2人だけであったこと、
タイポグラフィがWeb開発者が身に付けるべき教養だとは認識されていないことを考えると
フォントについて詳しいWeb開発者は少ないでしょうね。
調べつつ記事を書いていたので今回は大変勉強になりました。
免罪符が必要なければ私も総称ファミリのみの指定でも良いかもと思って来ました。

やみ said...

そういえば、今頃になって気づいたのですが
このページ追記部分のスクリーンショット
http://wada811.blogspot.com/2012/12/best-font-family-definitive-edition.html
は我がところながらひどいですね。

調べてみたところIEにはSansserifやSerif指定時に
中国語フォントが混在するバグがあるようです(「選」など)
さすがに見過ごせないので、ポリシーを破って
<!--[if IE ]>○○<![endif]-->でメイリオを!important適用してしまいました。

----

>> メイリオはUI用フォントであって本文書体ではないのでCSSで指定するのはためらわれますが、
>> あえて使うとすればメイリオ単独、もしくは欧文のSegoeと合わせるのが良いでしょう。
>> Segoeは英語版WindowsのUIフォントです。字形はメイリオの英字とよく似ています。
>なるほど、勉強になります。

ちょっと調べてみたのですが、メイリオはVerdanaを元に(和文も欧文も)デザインされた書体らしいです。
それにしては不揃いが目立つ気がしますが……。

----

ちなみにサンプルページは僕の環境ですとこのように表示されます。
Chrome/Win7/MacType/Serif=リュウミンです。
http://i.imgur.com/a0h0n.png

MacTypeくらいきれいなレンダリングが得られるのであればWebフォントもありかなと思います。
それまでは総称ファミリか和文のみ指定ですか…… ちょっと切ないですが

Takumi WADA said...

> 調べてみたところIEにはSansserifやSerif指定時に
> 中国語フォントが混在するバグがあるようです(「選」など)
> さすがに見過ごせないので、ポリシーを破って
> でメイリオを!important適用してしまいました。
調べてみるとそんなバグが有るんですね。さすがIEというか…。
総称ファミリ指定でIEのみ条件付きコメントでフォント指定は良いアイディアですね。
IE10では条件付きコメントが使えなくなるので(条件付きコメント (Windows))そのバグが修正されていればいいですが…。
そうすればあまりにも酷い表示がなくなるので、クライアントが環境による表示の差を理解してくれれば
総称ファミリ指定もやりやすいかもしれないです。

----

> ちょっと調べてみたのですが、メイリオはVerdanaを元に(和文も欧文も)デザインされた書体らしいです。
> それにしては不揃いが目立つ気がしますが……。
調べてみるとVerdanaをリデザインしているみたいなので組み合わせるとやっぱり不揃いがあるみたいですね。
やっぱり和欧混植はやらないほうがよさそうですね。

----

> ちなみにサンプルページは僕の環境ですとこのように表示されます。
> Chrome/Win7/MacType/Serif=リュウミンです。
> http://i.imgur.com/a0h0n.png
>
> MacTypeくらいきれいなレンダリングが得られるのであればWebフォントもありかなと思います。
綺麗ですねー。Webフォントも日本語フォントが充実して使い勝手が良くなるといいですね。
現在は特定の文字のみをサブセットにしたWebフォントがキャンペーンサイトとかで使われるくらいなので
もっと導入事例が増えて、対応している日本語の文字が増えれば使えるかもしれないです。これからに期待ですね。
> それまでは総称ファミリか和文のみ指定ですか…… ちょっと切ないですが
そういうことになりますね。PCサイトは和文のみ指定が安牌ですが、
スマホサイトはスマホに日本語フォントが1,2種類しか入っていないので総称ファミリを指定するのがベストですね。

今回、やみさんのおかげで色々学ぶことができてかなりフォント指定の意識が変わりました。ありがとうございました。

Anonymous said...

すみません、一つだけつっこませて下さい

>「ぼくのかんがえたさいきょうのfont-familyしてい」だからこれでいいんだ!
>という主張に対しては、もし
>
>「ぼくのかんがえたさいきょうのセキュアログインフォーム(ただし実際は環境依存でセキュリティリスクあり)」
>だったら? その方法が拡散してしまったときの責任は?
>
>とだけ書いておきます。

好みの問題としか言いようがないデザインの話と、実害が出る可能性のあるセキュリティの話を同列に語るんじゃない。

やみ said...

>好みの問題としか言いようがないデザインの話と、実害が出る可能性のあるセキュリティの話を同列に語るんじゃない。

「バッドノウハウが拡散してしまったあとの害悪」は、Web系の人間なら嫌という程理解しているはずでしょう。その点に関して、両者は同列です。

Anonymous said...

いいじゃん、好きにしたら(^^;