WordPress をカスタマイズしようとしたら、CSS に［ text-rendering: optimizeLegibility; ］という見たことがなかったプロパティがあったので調べてみた。

text-rendering とは

テキストのレンダリングの指定やアンチエイリアスなどを施してくれる CSS のプロパティ。

知らなかったプロパティだったけど、テキストを読みやすく、より美しくしてくれるもので、実は結構、昔からあるプロパティとのこと。

text-rendering は、もともとは CSS ではなくSVG の仕様として定義されていて、Firefox 、Chrome 、Safari は対応しているが、対応していないブラウザもある。

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

指定値

  • auto（初期値）　『指定しない場合』
  • optimizeSpeed　『速度、読みやすさ、幾何学的な正確さの適切なバランスをとる』
  • optimizeLegibility　『アンチエイリアス処理、組み込みのフォントヒンティングの片方あるいは両方を行う』
  • geometricPrecision　『フォントヒンティングを行わない』
  • inherit　『inherit前の値を継承』

指定値の中では、カーニングとリガチャ（合字） をうまく調整する読みやすさ重視の［ text-rendering: optimizeLegibility; ］を指定することが多い。

でも、ブラウザによって挙動が異なり、フォント自体がカーニングやリガチャのデータを持っていなければ指定しても無意味で、いくつかのフォントとテキストの組み合わせで意図しない文字が表示されてしまうなどの不具合も確認されている。

これとは別に、カーニングには font-kerning プロパティがあるけど、このプロパティも知らなかった。

text-rendering は、結構、不具合が確認されているので、考えながら使うようにしよう。