text-renderingって何?!

こんちゃー!ヾ(*´∀`*)ノAipawn(旧:WebデザイナーA)です。
今日は知らいない人もいるのではないでしょうか?「text-rendering」について紹介したいと思います。

img_seo_bnr02

text-renderingって何?!

text-renderingとは、その名の通り文字をレンダリングしてくれるCSSのプロパティです。
「読みやすく、より美しく」を気持ち程度に実現・カーニングしてくれる素敵なものです。
実は結構昔からあるプロパティなのですが、あまり見たことがないプロパティですよね。

指定の仕方

text-renderingにはいくつか指定できる値があります。

// auto
// ユーザエージェントにお任せ
// 指定しない場合はこれ

text-rendering : auto;

// optimizeSpeed
// ユーザエージェントが速度、読みやすさ、幾何学的な正確さの適切なバランスをとる
// 読みやすさが最重要視される

text-rendering : optimizeSpeed;

// optimizeLegibility
// ユーザエージェントが幾何学的な読みやすさを優先
// アンチエイリアス処理、組み込みのフォントヒンティングの片方あるいは両方を行う

text-rendering : optimizeLegibility;

// geometricPrecision
// ユーザエージェントが幾何学的な正確さを優先
// フォントヒンティングを行わない

text-rendering : geometricPrecision;

// inherit
// 前の値を継承
// 使う機会はあまりない

text-rendering : inherit;

早速指定してみた

text-renderingを早速指定してみた

上から指定なし、optimizeSpeed、optimizeLegibility、geometricPrecisionです。

何も変わっていないような・・・というか変わっていません!
そう、実は対応しているフォントが限られているんです。

フォントが持つ情報に、カーニングや合字のデータを持っていなければ指定しても何も起こりません。
つまり、Webフォントでなければ意味が無いのです!∑(゚Д゚)ガーン

Webフォントで改めて試す!

text-renderingを早速指定してみた その2

上から指定なし、optimizeSpeed、optimizeLegibility、geometricPrecisionです。最後におまけで重ねてみました。

Webフォントで試したところ、カーニングされていることが分かりますね。
上2つ、下2つはあまり変化がないように思いますが、拡大したら微妙に違うのかもしれません。

img_seo_bnr02

私はこう見る

どのブラウザでも統一のフォントであると助かることは多々あります。
今後のWebデザインの流れはWebフォントが当たり前になるのではないでしょうか。
日本語対応のWebフォントもだいぶ増えてきましたし、お客様がライセンス料などに目を瞑って頂けるならば、どんどん使っていきたいところですね。

それでは、またヾ(*´∀`*)ノ

CONTACT US

株式会社プロフェッサはシステム開発・Webサイト制作会社です。
お仕事のご依頼やお困りな事がございましたらお気軽にご連絡ください。


Previous Post

Next Post