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-size20px 未満の場合にブラウザーが自動的に 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

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

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 の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非標準
Chrome 完全対応 4
補足
完全対応 4
補足
補足 This property is only supported on Windows and Linux.
補足 Initial versions had bugs on Windows and Linux that broke font substitition, small-caps, letter-spacing or caused text to overlap.
Edge ? Firefox 完全対応 3
補足
完全対応 3
補足
補足 This property is only supported on Windows and Linux.
補足 The optimizeSpeed option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 5WebView Android 完全対応 3
補足
完全対応 3
補足
補足 From version 3 to 4.3, there is a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render. This was fixed in version 4.4.
Chrome Android ? Edge Mobile ? Firefox Android 完全対応 46Opera Android 完全対応 36Safari iOS 完全対応 4.3Samsung Internet Android ?
auto
非標準
Chrome 完全対応 あり
補足
完全対応 あり
補足
補足 Chrome treats auto as optimizeSpeed.
Edge ? Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 If the font size is 20 pixels or higher, Firefox treats auto as optimizeLegibility. For smaller text, Firefox treats auto as optimizeSpeed. The 20-pixel threshold can be changed with the browser.display.auto_quality_min_font_size preference.
IE 未対応 なしOpera ? Safari 完全対応 あり
補足
完全対応 あり
補足
補足 Safari treats auto as optimizeSpeed. See WebKit bug 41363.
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
geometricPrecision
非標準
Chrome 完全対応 13
補足
完全対応 13
補足
補足 Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Edge ? Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Firefox treats geometricPrecision the same as optimizeLegibility.
IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09
最終更新者: mfuji09,