文本渲染 | text-rendering

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 。

语法

值

auto浏览器在绘制文本的同时，对于何时优化速度，可读性和几何精度进行了有根据的猜测。有关浏览器解释此值的差异，请参阅兼容性表。

浏览器强调渲染速度和易读性的几何精度。字体的某些方面（如字距调整）不能线性缩放。所以这个值可以使文本使用这些字体看起来不错。

在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; }

规范

浏览器兼容性