CSS关于文本渲染的属性text-rendering

时间：2022-03-22 21:48:25

CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性（清晰度）和几何精度方面做一个权衡。

我们知道，SVG-可缩放矢量图形（Scalable Vector Graphics）是由W3C制定的， 基于
可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG严格遵从 XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率 无关的矢量图形格式。IE 9、Firefox、Opera、Chrome 以及 Safari 支持内联  SVG。IE 8或更早版本，可通过安装Adobe SVG Viewer以支持SVG。

而属性text-rendering正是一个SVG属性，目前尚没有任何的CSS标准对其进行定 义。

不过Gecko（for Firefox）和WebKit核心的浏览器已经允许你在 Windows/Mac/Linux系统的HTML/XML内容中应用该属性。

对于某些小于20px的字体来说，当你把该属性设为optimizeLegibility时，包含 诸如ff、fl、fi这种连字的文本会产生一个非常明显的效果，比如Microsoft's  Calibri, Candara, Constantia, Corbel和DejaVu类字体。如果你对连字不太理 解，可以参考*的解释 http://en.wikipedia.org/wiki/Typographic_ligature

默认值：auto
适用于：文本元素
继承性：yes
媒介类型(Media Types)：可视型（公认的媒介类型包括哪些？参见W3C文档 http://www.w3.org/TR/CSS2/media.html）

语法：

格式：text-rendering: auto | optimizeSpeed | optimizeLegibility |  geometricPrecision |  inherit

值：

auto:
当绘制文本时，浏览器会进行智能识别，何时应该从速度、清晰度和几何精度方 面进行优化。关于各浏览器对该属性解释的差别，参见下面的兼容性表格。

optimizeSpeed：
当绘制文本时，浏览器会着重渲染速度，而不是清晰度和几何精度。该属性值不 能用于字距调整和连字。Gecko默认开启该属性，Firefox 是默认20px以下开启该属性。

optimizeLegibility：
当绘制文本时，浏览器会侧重文本的可读性（清晰度），而不是渲染速度和几何 精度。该属性值可以用于字距调整和连字。
使用CSS 3的@font-face来渲染文字的情况越来越多，易读性开始被关注和重视。尤其是小号的文字。由于目前还没有CSS属性控制显示在线字体的微妙细节，Safari 5,Chrome和Webkit系列浏览器支持text-rendering启用kerning 和 ligatures。
Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性， 而后者，你需要将其设置为optimizeLegibility。Firefox默认20px以上字体文本会开启该属性。
geometricPrecision：
当绘制文本时，浏览器会着重几何精度，而不是清晰度和渲染速度。字体的某些 方面，比如字间距并不是按照线性比例进行渲染的，因此该属性可以使得设置为 这些字体的文本看起来很整洁。

在SVG中，当文本被放大或缩小，浏览器会计算文本的最终尺寸（即指定字体大小 和应用比例），然后按照计算出来的尺寸，从系统的字体库中请求一种合适的字 体。但是，如果你要求的字体大小，比如9px字号的140%的比例，产生的字号12.6 在字体库中并不存在，所以此时浏览器会将字号舍为12px。这导致了文本的阶梯 缩放。

不过，当渲染引擎完全支持几何精度属性时，你可以利用几何精度属性流畅地缩 放文本。对于比较大的缩放因子，你可能看不到特别完美的渲染效果，但显示字 号将会是你所期待的大小，既不会向上也不向下四舍五入Windows/Linux支持的字 号大小。

如果定义为geometricPrecision，Webkit精确应用定义的属性值，Gecko则将 geometricPrecision解释为optimizeLegibility，其表现与设置为 optimizeLegibility的表现是一样的.

实例

/* 对body应用optimizeLegibility保证整个html文档的易读性，但可能出现文字连写的效果，对元素应用class='foo'可以避免出现文字连写现象 */

  1. body  { text-rendering: optimizeLegibility; }
  2. .foo  { text-rendering: optimizeSpeed; }
CSS 代码 字间距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这一项。（对于Firefox，首先在浏览器键入about:config回车即可进入，更多更改配置选项的方法参见这里http://kb.mozillazine.org/Editing_configuration），如果你想了解更多有关mozilla preference-browser.display.auto_quality_min_font_size的介绍可以查看官方文档http://kb.mozillazine.org/Browser.display.auto_quality_min_font_size。

optimizeSpeed选项在Gecko2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)上无效。因为文本渲染的标准代码已经足够快，没有比它更快的代码路径。这是一个bug。参见bug 595688 .https://bugzilla.mozilla.org/show_bug.cgi?id=595688

浏览器兼容表：

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) Not supported Not supported 5.0 (532.5)
Basic support for other operating systems Not supported Not supported Not supported Not supported Not supported
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 useoptimizeSpeed. Not supported Not supported 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.  Not supported  Not supported  

 

存在的问题：

混合使用optimizeLegibility和font-variant: small-caps会导致small-caps渲染失败。最糟糕的情况是文本不显示在Web页面上，在低配置的移动设备上可能导致页面无法正常加载。（问题bug原文http://code.google.com/p/chromium/issues/detail?id=51973）
对Safari 5，使用ex作为 margin, padding, border-width ,outline-width的度量单位，同时使用optimizeLegibility会导致浏览器崩溃。不过本人测试Safari 5.1.7(7534.57.2)中文版貌似已经修复了崩溃的问题。（测试页面地址http://quorning.net/safari_crash.htm）

相关文章