text-rendering
CSS text-rendering Property
The text-rendering property gives information to the rendering engine about what to optimize for when rendering text.
The text-rendering property has four values:
auto
optimizeSpeed
optimizeLegibility
geometricPrecision
When the text-rendering property is set to “optimizeLegibility” successive capital letters become more spaced, and ligatures are enabled.
The text-rendering is actually not a CSS property and is not defined in any CSS specification.
It’s an SVG property, but Gecko-based and WebKit-based browsers allow to apply it to HTML content via CSS.
The text-rendering property works only in Windows and Linux.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | Text elements. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | Scalable Vector Graphics (SVG) 1.1 |
| DOM Syntax | object.style.textRendering = “optimizeLegibility”; |
Syntax
Syntax
text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;
Example of the text-rendering property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eee;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
hr {
margin: 60px 0;
}
table {
table-layout: fixed;
padding: .3em;
border: 1px solid #ccc;
background-color: #f9f9f9;
margin-bottom: 1em;
}
td {
padding: 15px;
border: 1px solid #eee;
}
h3 {
font-size: 5em;
line-height: 1;
font-family: sans-serif;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
font-family: 'Roboto', Helvetica, sans-serif;
}
.optimizeLegibility {
text-rendering: optimizeLegibility;
}
</style>
</head>
<body>
<h2>Text-rendering example</h2>
<table>
<tr>
<td>Text-rendering: auto;</td>
<td>
<h3 class="uppercase">LOREM</h3>
</td>
</tr>
<tr>
<td>Text-rendering: optimizeLegibility;</td>
<td>
<h3 class="optimizeLegibility uppercase">LOREM</h3>
</td>
</tr>
</table>
<table>
<tr>
<td>Text-rendering: auto;</td>
<td>
<h3>Ipsum</h3>
</td>
</tr>
<tr>
<td>Text-rendering: optimizeLegibility;</td>
<td>
<h3 class="optimizeLegibility">Ipsum</h3>
</td>
</tr>
</table>
<table>
<tr>
<td>Text-rendering: auto;</td>
<td>
<h3 class="italic">lorem ipsum</h3>
</td>
</tr>
<tr>
<td>Text-rendering: optimizeLegibility;</td>
<td>
<h3 class="optimizeLegibility italic">lorem ipsum</h3>
</td>
</tr>
</table>
</body>
</html>
The Difference Between the “optimizeSpeed” and “optimizeLegibility”
The Difference Between the “optimizeSpeed” and “optimizeLegibility”
The example below will show the difference between the “optimizeSpeed” and “optimizeLegibility” values. Take into account, that the result may be different depending on the browser you use:
Example of the text-rendering property with the “optimizeSpeed” and “optimizeLegibility” values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 1.5em;
color: #777777;
}
.optimize-speed {
text-rendering: optimizeSpeed;
}
.optimize-legibility {
text-rendering: optimizeLegibility;
}
</style>
</head>
<body>
<p class="optimize-speed">optimizeSpeed vs optimizeLegability</p>
<p class="optimize-legibility">optimizeSpeed vs optimizeLegability</p>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| auto | The browser makes guesses about when to optimize for speed, legibility, and geometric precision while drawing text. This value is interpreted differently by the browsers. |
| optimizeSpeed | Specifies that the browser should emphasize rendering speed over legibility and geometric precision when drawing text. Kerning and ligatures are disabled. |
| optimizeLegibility | Specifies that the browser should emphasize legibility over rendering speed and geometric precision. |
| geometricPrecision | Specifies that the browser should emphasize precision over rendering speed and legibility. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |