CSSの[text-rendering: optimizeLegibility;]は指定しないほうが無難かも。

Ads by Google

WordPress のデフォルトのテーマファイル「Twenty Fourteen」のスタイルシートを眺めていたところ、[text-rendering: optimizeLegibility;]という見慣れないプロパティがあったので調査してみました。

結論から言うと、現段階ではまだ text-rendering: optimizeLegibility; は指定しないほうが良さそうです。

text-rendering プロパティは、もともとは CSS ではなく SVG の仕様として定義されています。
現在のところブラウザ側では Firefox、Chrome、Safari が対応しているようです。
指定できる値は以下のとおり。

  • auto (初期値)
  • optimizeSpeed
  • optimizeLegibility
  • geometricPrecision
  • inherit

[text-rendering]プロパティに属性[optimizeLegibility]を指定すると、カーニングとリガチャ(合字) をうまい具合に調整してくれるようになります。

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

目指している機能はとても素晴らしいのですが、不具合のほうが目立つので、『現段階ではまだ text-rendering: optimizeLegibility; は指定しないほうが無難かも』という結論に至りました。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です