【ネットの反応まとめ】Re: Webフォントを滑らかに表示させるCSS 2016年版

公開:2016-02-14 08:00
更新:2019-05-04 01:53
編集:jdash2000

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

本ページはプロモーションが含まれている場合があります

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

はてなブックマーク - Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）

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

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

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

@jdash2000 仮想PCのWIn10にChrome入れて下記ページ見たら意外とWebフォント綺麗に見えたのですが、よく考えたらRetinaディスプレイでUI 250%にしてました。みんなRetinaになればええんや…https://t.co/6VTGXMCuJt
— なつき㌠ (@Stocker_jp) 2016, 2月 13

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

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

@jdash2000 ちなみにこんな感じです。 pic.twitter.com/g1MY870haj
— なつき㌠ (@Stocker_jp) 2016, 2月 13

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

@jdash2000 先ほど言い忘れましたが、Retina Win10 Chrome UI 250% 環境では 0.001deg は全く効果がありませんでした。以前は効果があった360degも効果がなく、0.1degでようやく効果が出てくる感じです。
— なつき㌠ (@Stocker_jp) 2016, 2月 13

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

●滑らかさが違う

なんか自分の環境とスクショで滑らかさが違うな…… / Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows） https://t.co/LKZkwoh2XT
— まとり (@ub_pnr) 2016, 2月 13

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

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

https://t.co/5Js6ZzUDYg
"そんなに読み込みが重く（遅く）感じることは少ない気がします"
は？ナメてんのか？という言葉しか出てこない
— ボ@破滅亭炎上 (@trickart4121) 2016, 2月 13

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

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

回答　ページ表示に必要とする文字のみを集めたフォントデータの事です。
詳細 | よくある質問（TypeSquare）

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

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

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

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

“少しだけ要素を回転することで、文字を滑らかに表示させます。 ” ??????? / “Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）” https://t.co/GiLwXjeWKX
— マイキャラ (@polamjag) 2016, 2月 13

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

●Windowsが残念なの？

Windowsのフォントレンダリングいまだに残念な感じなのか・・・ / “Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）” https://t.co/jKluF9zsaw
— Miyaco (@MiyakoDev) 2016, 2月 13

Windowsでフォントをキレイにする話、もう何十年やってるんだろう / “Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）” https://t.co/xcE4WNURS4
— みかんトゥーン (@mikana) 2016, 2月 13

こんな無理矢理なことしなくても文字がキレイにレンダリングされるように、OS側でちゃんとして欲しい… https://t.co/Fsgl9zGMxJ
— 田所淳 (@tadokoro) 2016, 2月 13

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

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

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

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

https://t.co/hSbSvrZbFJ データ側でのかういふ付け焼刃的なその場しのぎのバッドノウハウは、あとで問題を根本的に(ブラウザやOSのレンダリングエンジンを改善するといった方法で)解決する際の大きな障壁になる。絶対にやめろ。
— コシヌケ1040 (@ksnk1040) 2016, 2月 13

バッドノウハウじゃないかなぁ / “Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）” https://t.co/abLcxpnJwM
— inf (@infinf) 2016, 2月 13

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
なんか一瞬バッドノウハウが見えたような気がする
2016/02/13 14:37

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
[CSS]
[まとめ]
[ネタ]

いつまでこんな“どのブラウザでも綺麗に”みたいなトリッキーな実装ネタやり続けるつもりなんだろ 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円（税抜）を払えば無料で使えるので、高くは感じていません（謎）。

価格（TypeSquare）

3000円払えば無料で10連まわせるとは（ニコニコ大百科）

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

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
[Webデザイン]
[font]

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は初めて知りました。情報ありがとうございます。

Scalable Inman Flash Replacement（Wikipedia）

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

jQuery sIFR Plugin | Description

ただ、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がアレなのはもう少し調整します。すみません。