这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
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 | ? | ? | ? | ? | ? |