文本渲染 | text-rendering
该text-renderingCSS属性提供信息，以什么来优化渲染文本时的渲染引擎。
浏览器在速度，可读性和几何精度之间进行权衡。
/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;该text-rendering属性是一个没有在CSS标准中定义的SVG属性。但是，Gecko和WebKit浏览器允许您将此属性应用于Windows，Mac OS X和Linux上的HTML和XML内容。
一个非常明显的效果是optimizeLegibility，对于某些字体（例如，Microsoft的Calibri，Candara，Constantia和Corbel，或DejaVu字体系列），文本中的连字（ff，fi，fl等）文本小于20px 。
Initial value | auto |
|---|---|
应用对象 | text elements |
是否可继承 | yes |
媒体 | visual |
计算值 | as specified |
动画类型 | discrete |
规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
auto浏览器在绘制文本的同时，对于何时优化速度，可读性和几何精度进行了有根据的猜测。有关浏览器解释此值的差异，请参阅兼容性表。
optimizeSpeed在绘制文本时，浏览器强调渲染速度超过可读性和几何精度。它禁用字距和连字。
optimizeLegibility浏览器强调渲染速度和几何精度的易读性。这使得字距和可选的连字。
geometricPrecision
浏览器强调渲染速度和易读性的几何精度。字体的某些方面（如字距调整）不能线性缩放。所以这个值可以使文本使用这些字体看起来不错。
在SVG中，当文本被放大或缩小时，浏览器计算文本的最终大小（由指定的字体大小和应用的比例决定），并从平台的字体系统中请求计算大小的字体。但是，如果您要求比例为9的字体大小为140，则字体系统中不会显式显示字体大小12.6，因此浏览器会将字体大小变为12。这导致文本的阶梯缩放。
但是，geometricPrecision当渲染引擎完全支持该属性时，可以让您流畅地缩放文本。对于大规模的因素，您可能会看到文本呈现效果不佳，但大小却是您所期望的 - 既不会舍入也不会下降到Windows或Linux所支持的最接近的字体大小。
注意：WebKit精确地应用了指定的值，但是Gecko把值看作是一样的optimizeLegibility。
形式语法
auto | optimizeSpeed | optimizeLegibility | geometricPrecision实例
optimizeLegibility自动在20px
<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>这证明了optimizeLegibility时，浏览器会自动使用font-size比20px*
.small { font: 19.9px 'DejaVu Serif', Constantia; }
.big { font: 20px 'DejaVu Serif', Constantia; }优化速度与优化度
<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p> p { font: 1.5em 'DejaVu Serif', Constantia; }
.speed { text-rendering: optimizeSpeed; }
.legibility { text-rendering: optimizeLegibility; }规范
Specification | Status | Comment |
|---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'text-rendering' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support for Windows and Linux | 4.01 | 3.02 | No support | 15 | 5.0 (532.5) |
Basic support for other operating systems | No support | No support | No support | ? | No support |
auto | (Yes)3 | (Yes)4 | No support | ? | (Yes)3 |
geometricPrecision | 135 | (Yes)6 | No support | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | 37 | 46 | No support | 36 | 4.3 |
auto | ? | ? | ? | ? | ? |
geometricPrecision | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
