CSS text-rendering プロパティ

構文

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

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

値

auto

ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。

auto の値は、品質とパフォーマンスのバランスをとる上で適切なデフォルト設定であり、特に長文のプレーンテキストにおいて有効です。

optimizeSpeed

ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。

optimizeSpeed 値は、プロセッサーの処理速度が遅い場合やバッテリー残量が少ない場合など、リソースに制約されるレンダリング環境において、推奨されます。

optimizeLegibility

ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。

optimizeLegibility の値は、見出しやバナーなど、文字サイズは大きいが内容が短いテキストの可読性を高めるために推奨されます。また、出版された記事などの高品質でプロフェッショナルな組版にも使用できます。パフォーマンスに影響を与える可能性があるため、一般的な記事には推奨されません。

geometricPrecision

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

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

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

geometricPrecision の値は、読みやすさやパフォーマンスを最適化しません。通常、テキストのサイズを歪めることなくグラフィックを忠実に変倍したい場合、SVG においてこの設定に意味があります。

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

公式定義

形式文法

text-rendering = 
  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 "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "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 "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

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

結果

仕様書

ブラウザーの互換性

関連情報

• <canvas> でのテキストの描画

• CSS テキスト装飾 モジュール

• 関連する CSS プロパティ

  • text-decoration（および個別指定プロパティの text-decoration-line、text-decoration-style、text-decoration-thickness など）
  • text-emphasis（および個別指定プロパティの text-emphasis-color、text-emphasis-position、text-emphasis-style など）
  • text-shadow
  • text-transform

• SVG の text-rendering 属性

• SVG と CSS