文字渲染text-rendering

Setting what to optimize when rendering text.

Overview

Examples

Optimize legibility

Use text-rendering:optimizeLegibility for headings or short text where ligatures and kerning quality matter more than rendering speed.

<h2 class="text-rendering:optimizeLegibility">    Product analytics</h2>

@layer utilities {    .text-rendering\:optimizeLegibility {        text-rendering: optimizeLegibility    }}

Prefer speed for dense updates

Use text-rendering:optimizeSpeed in fast-updating or very dense surfaces when rendering performance matters.

<div class="text-rendering:optimizeSpeed">    Streaming log output</div>

Return to browser behavior

Use text-rendering:auto when the browser should choose the rendering strategy.

<p class="text-rendering:auto">Default rendering</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<p class="text-rendering:optimizeLegibility:hover text-rendering:auto@sm text-rendering:auto@print">...</p>