We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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
適用対象テキスト要素
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

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

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

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

形式文法

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

<20px における自動的な optimizeLegibility

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

これは、 font-size20px よりも小さい場合、ブラウザーが自動的に optimizeLegibility を使用する様子を示しています。

.small { font: 19.9px 'DejaVu Serif', Constantia; }
.big   { font: 20px 'DejaVu Serif', Constantia; }

optimizeSpeed と optimizeLegibility

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p> 
p { font: 1.5em 'DejaVu Serif', Constantia; }

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応42 3 ?32 4 なし155
auto あり5 ? あり6 なし ? あり7
geometricPrecision138 ? あり9 なし ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応31 ? ?46364.3 ?
auto ? ? ? ? ? ? ?
geometricPrecision ? ? ? ? ? ? ?

1. 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.

2. This property is only supported on Windows and Linux.

3. Initial versions had bugs on Windows and Linux that broke font substitition, small-caps, letter-spacing or caused text to overlap.

4. 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.

5. Chrome treats auto as optimizeSpeed.

6. 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.

7. Safari treats auto as optimizeSpeed. See WebKit bug 41363.

8. Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.

9. Firefox treats geometricPrecision the same as optimizeLegibility.

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

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