text-rendering
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
text-rendering
は CSS のプロパティで、テキストを描画するときの最適化方法に関する情報をレンダリングエンジンに提供します。
ブラウザーは速さ、読みやすさ、位置の正確さをトレードオフにします。
/* キーワード値 */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
/* グローバル値 */
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
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
-
ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。
optimizeSpeed
-
ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。
optimizeLegibility
-
ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。
geometricPrecision
-
ブラウザーは速さや読みやすさよりも、位置の正確さを強調します。フォントの一部の側面 — カーニングなど — は、倍率に比例しません。そのため、この値はこれらのフォントを使ったテキストを美しくすることができます。
SVG では、テキストが拡大または縮小されるとき、ブラウザーはテキストの最終的な寸法 (特定のフォントの大きさと適用される倍率によって決まる) を計算し、プラットフォームのフォントシステムに計算値のフォントを要求します。しかし、大きさ 9 で倍率 140% のフォントを要求すると、フォントの大きさの結果は 12.6 となり、フォントシステムに存在するものではなくなるので、ブラウザーはフォントの大きさを 12 に丸めます。結果的に、テキストは段階的な倍率になります。
しかし、
geometricPrecision
は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮することができます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。メモ: WebKit は指定された値を厳密に適用しますが、 Gecko は値を
optimizeLegibility
と同様に扱います。
公式定義
初期値 | auto |
---|---|
適用対象 | テキスト要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
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;
}
結果
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextRenderingProperty |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
-
CSS テキスト装飾 モジュール
-
関連する CSS プロパティ
text-decoration
(およびtext-decoration-line
,text-decoration-style
,text-decoration-thickness
などの個別指定プロパティ)text-emphasis
(およびtext-emphasis-color
,text-emphasis-position
, andtext-emphasis-style
などの個別指定プロパティ)text-shadow
text-transform
-
SVG の
text-rendering
属性