概要 「Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)」の記事へのネットでのご意見をまとめました(随時更新)

20160214-ネットの反応-Webフォントを滑らかにするCSS-01

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)」は想像以上に反応があってビックリしました。


20160214-ネットの反応-Webフォントを滑らかにするCSS-02

はてなブックマークでも200ブックマーク超えってことで、こういうハックっぽいのは関心があるのだなと改めて感じました。


せっかく色々な意見を頂き、知らないこともあったので、自分が後で見返せるようにまとめておきます。(書ける時に随時更新)




●Retinaディスプレイだと見え方が違う・効果が違う

Retinaディスプレイで、スケーリング機能を使って拡大しているとフォントが滑らかな表示になるとか。

4Kや5Kディスプレイが段々出てきているので、そういう感じの方もいるのかもしれませんね。


Retinaディスプレイでスケーリング250%の実際の画面を見ると、フォントのレンダリングがキレイですね。早くWindowsもRetina(HiDPI)ディスプレイが当たり前になると良いですね…。


環境が違うと、値の効き方も変わってくるみたいです。0.1degでようやく効くとのことで、GitHubの記事からすると、かなり角度を大きくしないと効かない場合もあるみたいですね。



●滑らかさが違う

先程のスケーリング機能によって異なるのかもしれませんし、GPUの支援機能(ハードウェアアクセラレーター)の設定によって異なるのかもしれません。



●日本語のWebフォントは重いのでは?

モリサワのWebフォントサービス「TypeSquare」は、表示されている文字の必要な分だけのWebフォントデータしかダウンロードしないサブセット方式なので、日本語であっても思ったより早いと感じています。(GoogleのWebフォントで源ノ角ゴシックを指定するのとは違う)

質問内容 サブセット化されたフォントとは?

回答 ページ表示に必要とする文字のみを集めたフォントデータの事です。

詳細 | よくある質問(TypeSquare)

ちなみに、今回サンプルとして使用したサイトでは、A1明朝・リュウミンR-KL・リュウミンB-KL・中ゴシックBBBを使用して、文字数は3300文字程度ですが、Webフォントのサイズは700KB程度でした。大きな画像を使用するサイトも多いので、そうしたリソースの一部としてみればそんなに大きなサイズでもないと思っています。

(ただ、今Firebugでページを確認してみたら、フォント名の関係で2回同じWebフォントがダウンロードされているっぽいので本当は350KBかもしれません…後で確認します)

いずれにしても、早い・遅いは感覚的なものなので個人差はあるのでご容赦ください。



●なぜ微妙に回転させると滑らかに?

最初の状態はドット上にカッチリハマっているので、ジャギーが出ているフォント表示になるので、微妙に回転させることで、描画されるドット上から少しずれて、描画を補完するためにアンチエイリアスが掛かるのです。



●Windowsが残念なの?

Windowsだとフォントのレンダリングが汚いというわけではありません。

実際に見てもらうと分かりますが、Internet Explorer 11(IE 11)はキレイに表示されているのです。

つまり、フォントのレンダリングの善し悪しはブラウザー側に責任があるのです。



●バッドノウハウでその場しのぎですよね?

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

なんか一瞬バッドノウハウが見えたような気がする

2016/02/13 14:37
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

いつまでこんな“どのブラウザでも綺麗に”みたいなトリッキーな実装ネタやり続けるつもりなんだろ IE6のためのCSSバックからなんも進歩してない

2016/02/13 20:08

完全にバッドノウハウです。仰るとおり。

でも、納品時に何か言われたら、その時点で対応できるなら対応したいよね…(未来が解決してくれます!で納得してくれるクライアントならいいけど)。

Web業界的には、CSSハックも同じ問題ですね。



Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

バッドノウハウだろうが、何だろうが顧客が求めるんだから仕方なかろうて。TypeSquareだって結構高いんだから、費用対効果を最大化するのはプロとしての責務なんだよ。もともとWeb屋の仕事の大半は不毛

2016/02/13 20:39

そうなんですよね…。TypeSquareはMORISAWA PASSORTで年間49,800円(税抜)を払えば無料で使えるので、高くは感じていません(謎)。



●アンチエイリアスが正義なの?

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

Apple系OSの画面みた第一印象が「文字の輪郭がぼやけて読みにくい」でWindowsのTrueTypeフォント補正も即行でオフにしたおっさんには、なめらか=きれいという感覚がいまいち分かりません

2016/02/13 23:20
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

「結構キレイになったと思いませんか?」→ すべて、にじんで、汚い。文字が判読不能に近い。読む気がしない。/ 画像が同時表示不能で、比較できない。こんなページを作る人はレベルがひどすぎる。廃業しろ。

2016/02/14 00:33

個人的にはアンチエイリアスが掛かっていた方が読みやすいですね(今回の例はChrome以外は読みやすいと思います)。

コントラストが下がるので、読みづらくなるという方もいるかと思います。

同時表示で画像比較できないのはすみません。



●Flash使えばキレイなのに

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

これだから、フォントはFlash Playerを使えと何度も(読みやすさ優先のアンチエイリアスが2005年のFlash Player 8から搭載され、どのブラウザでも高い互換性がある)。sIFRという高度な技もあるよ。

2016/02/13 22:12

確かにFlashのフォント表示はキレイですよね…。Flash Paperとかありましたし。

sIFRは初めて知りました。情報ありがとうございます。

調べてみたらjQueryのプラグインもあるのね。

ただ、PCはともかく、スマホなどはFlash対応が無理ですし、モリサワのWebフォントを使用することは無理な気が…。

質問内容 Flash環境でTypeSquare の配信フォントを利用することはできますか?

回答 TypeSquare が配信するフォントは、Flashでは使用できません。

詳細 | よくある質問(TypeSquare)



●MacType使えば解決

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

Windowsでフォントレンダリングに不満のある人は自分でMacType入れてるからそっとしておいて。

2016/02/13 20:59

私も普段自宅ではMacType使っています(笑)。



●Direct2D/DirectWriteで変わるのでは

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

どう見てもバッドノウハウ。DirectWriteに触れてもないしTrueTypeとOpenTypeについてのレンダリングにも触れてない。|あとChrome、アフターの方が酷くなってるよ…。

2016/02/13 20:33

(DirectWriteの件は後で書きます chrome://flags/)

モリサワのWebフォントは、いわゆるPSフォント系のOpenTypeだと思います。さすがに。つまりキレイに出るハズのものがキレイに出ていないと考えるべきでは。

Chromeがアレなのはもう少し調整します。すみません。



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索