text-rendering

CSS の text-rendering プロパティは、テキストを描画するときの最適化方法に関する情報をレンダリングエンジンに提供します。

ブラウザーは速さ、読みやすさ、位置の正確さをトレードオフにします。

/* キーワード値 */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* グローバル値 */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

メモ: text-rendering プロパティは SVG のプロパティであり、 CSS 標準では定義されていません。しかしながら、 Windows, MacOS, Linux の Gecko や WebKit のブラウザーは、このプロパティを HTML 及び XML コンテンツに適用することができます。

とても目に見えやすい効果は optimizeLegibility で、一部のフォント (例えば、 Microsoft Calibri, Candara, Constantia, Corbel, または DejaVu フォントファミリ) において 20px より小さい文字に合字 (ff, fi, fl, など) を適用します。

初期値auto
適用対象テキスト要素
継承あり
計算値指定通り
アニメーションの種類離散値

構文

値

auto
ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。
optimizeSpeed
ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。
optimizeLegibility
ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。
geometricPrecision

ブラウザーは速さや読みやすさよりも、位置の正確さを強調します。フォントの一部の側面 — カーニングなど — は、倍率に比例しません。そのため、この値はこれらのフォントを使ったテキストを美しくすることができます。

SVG では、テキストが拡大または縮小されるとき、ブラウザーはテキストの最終的な寸法 (特定のフォントの大きさと適用される倍率によって決まる) を計算し、プラットフォームのフォントシステムに計算値のフォントを要求します。しかし、大きさ9で倍率140%のフォントを要求すると、フォントの大きさの結果は12.6となり、フォントシステムに存在するものではなくなるので、ブラウザーはフォントの大きさを12に丸めます。結果的に、テキストは段階的な倍率になります。

しかし、 geometricPrecision は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮できます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。

メモ: WebKit は指定された値を厳密に適用しますが、 Gecko は値を optimizeLegibility と同様に扱います。

形式文法

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

例

optimizeLegibility の自動的な適用

font-size が 20px 未満の場合にブラウザーが自動的に optimizeLegibility を使用する方法を紹介します。

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

CSS

.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }

結果

optimizeSpeed と optimizeLegibility

この例は、 optimizeSpeed と optimizeLegibility の (このブラウザーでの) 表示方法の違いを紹介します (ブラウザーによって違います)。

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

CSS

p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }

.speed       { text-rendering: optimizeSpeed; }
.legibility  { text-rendering: optimizeLegibility; }

結果

仕様書

仕様書 状態 備考
Scalable Vector Graphics (SVG) 2
text-rendering の定義		 勧告候補 変更なし
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
text-rendering の定義		 勧告 初回定義

ブラウザーの対応

BCD tables only load in the browser