CSS - text-rendering

概要

属性名	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)を優先します。

使用例

CSS

.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;
}

HTML

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

表示

AVAVAVAV - ff fi fl ffl - auto

AVAVAVAV - ff fi fl ffl - optimizeSpeed

AVAVAVAV - ff fi fl ffl - optimizeLegibility

AVAVAVAV - ff fi fl ffl - geometricPrecision

AVAVAVAV - ff fi fl ffl - No ligatures

AVAVAVAV - ff fi fl ffl - No kerning

リンク

初版：2022年9月25日、最終更新：2022年9月25日

https://www.tohoho-web.com/css/prop/text-rendering.htm

CSS - text-rendering

概要

説明

使用例

関連項目

リンク