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

概要 ▶ 日本語のWebフォントはブラウザーによってはキレイ（滑らか）に見えないこともあります。、滑らかさを出せるCSS設定を紹介します。本ページはプロモーションが含まれている場合があります 目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは

[jdash]

日本語Webフォントを使って思ったことを書いたよ。実はIE11が一番キレイなのだｗ

[mr_mayama]

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

[yasu-log]

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

[nomaharu2013]

“text-shadow: 0 0 0.1px rgba(0,0,0,0.5)”

[polamjag]

“少しだけ要素を回転することで、文字を滑らかに表示させます。 ” ???????

[megamouth]

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

[love0hate]

無理矢理アンチエイリアスを掛けるバッドノウハウｗ

[diveintounlimit]

Windowsしか見てなくてしかも使っているのがモリサワのリュウミンで何なんですかね

[gla69]

このアンチエイリアスかける話時々出るけどありえねぇからな！？？て思ってる。

[wakuworks]

全体的に描写速度が遅くなる気がする

[kijtra]

むかしこういうのやってたけど無駄に描画遅くなるしメモリも使うのでデフォルトでやってる。

[hachiame]

このアイデア、いいね！

[daizo1117]

“transform: rotate(0.001deg);”

[kathew]

バッドノウハウだけど部分的に参考に。DirectWriteに描かせよう

[subeniya]

“transform: rotate(0.001deg);”

[tvsk]

Firefox (Win) でフォントが汚く表示される事象。記事に取り上げているだけあってページがきれい

[lazex]

何もしてないけどFirefoxが一番綺麗。Chromeはちょっと汚いときがある。IEは見れたものじゃないヒドさ。IE11が綺麗ってどんな状況？？？

[mandel59]

ヒンティングの殺し方

[glat_design]

涙ぐましいとしか言いようがなく、つらい /

[field_combat]

最後の手段としてメモ

[HM_naoto]

今までずっとMacで制作してたから気にならなかったけど、現在はWinで制作しているからフォントについて気になってたところ

[peppers_white]

MacTypeの安心感

[KoshianX]

これは bad knowhow だ……

[owi]

もうwindowsは文字を1/60フレーム単位で小刻みに震わす、でいいんじゃないかな

[secseek]

日本語環境ってやっぱり後回しなんですかね。Chromeで英語のサイトを見に行くと、文字がすごくきれいでびっくりすることがあるのですが。

[doubleup]

無理矢理アンチエイリアスかけないでください。滲んだ文字は見辛いんです。

[o_hiroyuki]

webフォント

[younari]

たしかに、文字が綺麗なら可読性増すと思うけどむりくり処理させて負荷かけなくて良いと思うけどね。

[chikoshoot]

STEP.1 まずウィンドウズPCを叩き割ります。

[naoya2k]

こんなアホなことしてくるWeb屋が居るのか。電池消費が増えるからやめてほしいんだけど。

[harv-tech]

大切だね、こういうの

[blueboy]

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

[miyanavi]

こういう案件で「FlashPlayer使えよ！」っていう技術者、今時いるのか見てみたい。

[wushi]

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

[pmint]

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

[mellow-mikan]

Windowsでフォントをキレイにする話、もう何十年やってるんだろう