CSS text-rendering Property
Example
p {
font: 1.5em "Constantia", "Times New Roman", "Georgia", "Palatino", serif;
}
.speed {
text-rendering: optimizeSpeed;
}
.legibility {
text-rendering: optimizeLegibility;
}Meaning:
The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.
The browser makes trade-offs among speed, legibility, and geometric precision.
Note: The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.
| Default value: | auto |
| Inherited: | Yes |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
text-rendering: auto|optimizeSpeed|optimizeLegibility|geometricPrecision|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| auto | The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table. |
| optimizeSpeed | The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures. |
| optimizeLegibility | The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures. |
| geometricPrecision | The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
text-rendering: auto;
}