CSS text-rendering 属性值说明
| 值 | 描述 |
|---|---|
| auto | 浏览器猜测何时可以在绘制文本时优化速度，易读性和几何精度。该值由浏览器不同地解释。 |
| optimizeSpeed | 指定浏览器应在绘制文本时强调呈现易读和几何精度的渲染速度。 Cherning和Ligatures被禁用。 |
| optimizeLegibility | 指定浏览器应强调在渲染速度和几何精度上的易读性。 |
| geometricPrecision | 指定浏览器应强调渲染速度和易读性的精度。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
语法
text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;
文本渲染属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</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">生活终归还得继续。</h3>
</td>
</tr>
<tr>
<td>Text-rendering: optimizeLegibility;</td>
<td>
<h3 class="optimizeLegibility uppercase">生活终归还得继续。</h3>
</td>
</tr>
</table>
<table>
<tr>
<td>Text-rendering: auto;</td>
<td>
<h3>生活终归还得继续。</h3>
</td>
</tr>
<tr>
<td>Text-rendering: optimizeLegibility;</td>
<td>
<h3 class="optimizeLegibility">生活终归还得继续。</h3>
</td>
</tr>
</table>
<table>
<tr>
<td>Text-rendering: auto;</td>
<td>
<h3 class="italic">生活终归还得继续。</h3>
</td>
</tr>
<tr>
<td>Text-rendering: optimizeLegibility;</td>
<td>
<h3 class="optimizeLegibility italic">生活终归还得继续。</h3>
</td>
</tr>
</table>
</body>
</html>
“optimizeSpeed”和“optimizeLegibility”之间的区别
下面的示例将显示“optimizeSpeed”和“optimizeLegibility”值之间的差异。
请注意，根据我们使用的浏览器，结果可能会有所不同：
具有“optimizeSpeed”和“optimizeLegibility”值的文本渲染属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</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>
text-rendering 属性向渲染引擎提供有关渲染文本时优化内容的信息。
text-rendering 属性有四个值：
- auto
- optimizeSpeed
- optimizeLegibility
- geometricPrecision
当 text-rendering 属性设置为“optimizeLegibility”时，连续的大写字母间距会更大，并启用连字。
文本渲染实际上不是 CSS 属性，也没有在任何 CSS 规范中定义。
它是一个 SVG 属性，但基于 Gecko 和基于 WebKit 的浏览器允许通过 CSS 将其应用于 HTML 内容。
文本渲染属性仅适用于 Windows 和 Linux。
| 初始值 | auto |
|---|---|
| 应用于 | 文本元素。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | 可缩放矢量图形（SVG）1.1 |
| DOM 语法 | object.style.textrendering =“geometricPrecision”; |
日期：2020-06-02 22:14:49 来源：oir作者：oir