本文主要包含CSS,ext-rendering等相关知识,佚名 希望在学习及工作中可以帮助到您
摘要：
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'可以避免出现文字连写现象 */
对Safari 5，使用ex作为 margin, padding, border-width ,outline-width的度量单位，同时使用optimizeLegibility会导致浏览器崩溃。不过本人测试Safari 5.1.7(7534.57.2)中文版貌似已经修复了崩溃的问题。（测试页面地址http://quorning.net/safari_crash.htm）
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'可以避免出现文字连写现象 */
对Safari 5，使用ex作为 margin, padding, border-width ,outline-width的度量单位，同时使用optimizeLegibility会导致浏览器崩溃。不过本人测试Safari 5.1.7(7534.57.2)中文版貌似已经修复了崩溃的问题。（测试页面地址http://quorning.net/safari_crash.htm）