| 属性名 | text-rendering |
|---|---|
| 値 | auto | optimizeSpeed | optimizeLegibility | geometricPrecision |
| 初期値 | auto |
| 適用可能要素 | テキスト |
| 継承 | 継承する |
| サポート | https://caniuse.com/?search=text-rendering |
テキストに対して、カーニングや合字(リガチャ)を行う・行わないといったレンダリングアルゴリズムを指定します。カーニングに関しては font-kerning、合字(リガチャ)に関しては font-variant-ligatures を参照してください。
| 値 | 説明 |
|---|---|
| auto | 描画速度・読みやすさをブラウザが総合判断してカーニングや合字を行う・行わないを決めます。 |
| optimizeSpeed | 描画速度(speed)を優先してカーニングや合字を行いません。ブラウザの実装により行うこともあります。 |
| optimizeLegibility | 読みやすさ(legibility)を優先してカーニングや合字を行います。ブラウザの実装により行わないこともあります。 |
| geometricPrecision | 位置(geometric)の精度(precision)を優先します。 |
.sample {
font-size: 22px;
line-height: 24px;
font-family: "Constantia", "Times New Roman", "Georgia", "Palatino", serif;
}
.speed {
text-rendering: optimizeSpeed;
}
.legibility {
text-rendering: optimizeLegibility;
}
.precision {
text-rendering: geometricPrecision;
}
.no-ligatures {
font-variant-ligatures: none;
}
.no-kerning {
font-kerning: none;
}
<div class="sample"> <div>AVAVAVAV - ff fi fl ffl - auto</div> <div class="speed">AVAVAVAV - ff fi fl ffl - optimizeSpeed</div> <div class="legibility">AVAVAVAV - ff fi fl ffl - optimizeLegibility</div> <div class="precision">AVAVAVAV - ff fi fl ffl - geometricPrecision</div> <div class="no-ligatures">AVAVAVAV - ff fi fl ffl - No ligatures</div> <div class="no-kerning">AVAVAVAV - ff fi fl ffl - No kerning</div> </div>