Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

text-rendering CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko(Firefox) 和 Webkit(Chrome、Safari) 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

一个视觉上很明显的效果是,optimizeLegibility 属性值会在某些字体(比如,微软的 Calibri,Candara,Constantia 和 Corbel 或者 DejaVu 系列字体)小于20px 时把有些相邻字符连接起来(ligatures,比如,ff、fi、fl 等,效果见下面的 LiveExample) 。

初始值auto
适用元素text elements
是否是继承属性yes
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 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;

auto
浏览器依照某些根据去推测在绘制文本时,何时该优化速度,易读性或者几何精度。对于该在不同浏览器中解释的差异,请看兼容性表。
optimizeSpeed
浏览器在绘制文本时将着重考虑渲染速度,而不是易读性和几何精度. 它会使字间距和连字无效。
optimizeLegibility
浏览器在绘制文本时将着重考虑易读性,而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题,详细查看 text-rendering
geometricPrecision

浏览器在绘制文本时将着重考虑几何精度, 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放,所以该值可以使使用某些字体的文本看起来不错。

对于 SVG,当文本缩放时,浏览器会计算文本最终大小(取决于特定的字体大小和相应的缩放比例)并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小,比如 9 并且 140% 的缩放,这个最终的字体大小为 12.6,字体系统中明显不存在,所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放,你可能看到并不太漂亮的文本渲染,但这个字体大小是你期望的,而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

提示: WebKit 准确地的实现了这个值, 但是 Gecko 把这个值按照 optimizeLegibility 处理。

示例

/* make sure all fonts in the HTML document display in all its glory,
   but avoid inadequate ligatures in class foo elements */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }

Live Example

没有在 Chrome 中看出例子中的区别来,可以移步看看这篇文章 text-rendering

CSS code Kerning Ligatures
font: 19.9px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
font: 20px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
font: 3em 'DejaVu Serif',Constantia;
text-rendering: optimizeSpeed;
LYoWAT ff fi fl ffl
font: 3em 'Dejavu Serif',Constantia;
text-rendering: optimizeLegibility;
LYoWAT ff fi fl ffl

Gecko 注释

auto 选项的 20px 字体大小的阈值可以被 browser.display.auto_quality_min_font_size 值改变.

optimizeSpeed 选项在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 上已经没有效果了,因为标准的文字渲染代码已经非常快,而且目前还没有更快的渲染方法。详见 bug 595688 .

说明文档

Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
text-rendering
Recommendation  

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko(Firefox) 和 Webkit(Chrome、Safari) 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support for Windows and Linux

4.0 but the implementation known bugs on Windows and Linux which can break font substitition, small-caps, letter-spacing or cause text to overlap

3.0 (1.9) 未实现 未实现 5.0 (532.5)
Basic support for other operating systems 未实现 未实现 未实现 未实现 未实现
auto Chrome treats this as optimizeSpeed.
Work is continuing onWebKit bug 41363
If the font size is 20 px or higher, Gecko browsers use optimizeLegibility; for smaller text, they use optimizeSpeed. 未实现 未实现 Safari treats this as optimizeSpeed.
Work is continuing onWebKit bug 41363
geometricPrecision 13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.
Introduced in WebKit 535.1   WebKit bug 60317
Gecko treats the value the same as optimizeLegibility.  未实现  未实现  
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

文档标签和贡献者

标签: 
 此页面的贡献者: billcz, wenshin, relaxgo, xgqfrms, fscholz, teoli, fakefish
 最后编辑者: billcz,