2023年6月21日发(作者：)
CSS⽂本渲染属性text-rendering的介绍和使⽤⽰例摘要：
CSS关于⽂本渲染的属性text-rendering告诉渲染引擎⼯作时如何优化显⽰⽂本。 浏览器会在渲染速度、易读性（清晰度）和⼏何精度⽅⾯做⼀个权衡。
我们知道，SVG-可缩放⽮量图形（Scalable Vector Graphics）是由W3C制定的， 基于可扩展标记语⾔（XML），⽤于描述⼆维⽮量图形的⼀种图形格式。SVG严格遵从 XML语法，并⽤⽂本格式的描述性语⾔来描述图像内容，因此是⼀种和图像分辨率 ⽆关的⽮量图形格式。IE 9、Firefox、Opera、Chrome 以及 Safari ⽀持内联 SVG。IE 8或更早版本，可通过安装AdobeSVG 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类字体。如果你对连字不太理 解，可以参考维基百科的解释 /wiki/Typographic_ligature
默认值：auto
适⽤于：⽂本元素
继承性：yes
媒介类型(Media Types)：可视型（公认的媒介类型包括哪些？参见W3C⽂档 /TR/CSS2/）
语法：
格式：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'可以避免出现⽂字连写现象 */
复制代码代码如下:body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }
Gecko核⼼浏览器注意事项：
属性值设为auto时有个20px的渲染阈值，这个阈值可以通过更改偏好设置_quality_min_font_size这⼀项。（对于Firefox，⾸先在浏览器键⼊about:config回车即可进⼊，更多更改配置选项的⽅法参见这⾥/Editing_configuration），如果你想了解更多有关mozilla _quality_min_font_size的介绍可以查看官⽅⽂档/_quality_min_font_size。
optimizeSpeed选项在Gecko2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)上⽆效。因为⽂本渲染的标准代码已经⾜够快，没有⽐它更快的代码路径。这是⼀个bug。参见bug 595688 ./show_?id=595688
浏览器兼容表：
存在的问题：
混合使⽤optimizeLegibility和font-variant: small-caps会导致small-caps渲染失败。最糟糕的情况是⽂本不显⽰在Web页⾯上，在低配置的移动设备上可能导致页⾯⽆法正常加载。（问题bug原⽂/p/chromium/issues/detail?id=51973）
对Safari 5，使⽤ex作为 margin, padding, border-width ,outline-width的度量单位，同时使⽤optimizeLegibility会导致浏览器崩溃。不过本⼈测试Safari 5.1.7(7534.57.2)中⽂版貌似已经修复了崩溃的问题。（测试页⾯地址/safari_）
2023年6月21日发(作者：)
CSS⽂本渲染属性text-rendering的介绍和使⽤⽰例摘要：
CSS关于⽂本渲染的属性text-rendering告诉渲染引擎⼯作时如何优化显⽰⽂本。 浏览器会在渲染速度、易读性（清晰度）和⼏何精度⽅⾯做⼀个权衡。
我们知道，SVG-可缩放⽮量图形（Scalable Vector Graphics）是由W3C制定的， 基于可扩展标记语⾔（XML），⽤于描述⼆维⽮量图形的⼀种图形格式。SVG严格遵从 XML语法，并⽤⽂本格式的描述性语⾔来描述图像内容，因此是⼀种和图像分辨率 ⽆关的⽮量图形格式。IE 9、Firefox、Opera、Chrome 以及 Safari ⽀持内联 SVG。IE 8或更早版本，可通过安装AdobeSVG 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类字体。如果你对连字不太理 解，可以参考维基百科的解释 /wiki/Typographic_ligature
默认值：auto
适⽤于：⽂本元素
继承性：yes
媒介类型(Media Types)：可视型（公认的媒介类型包括哪些？参见W3C⽂档 /TR/CSS2/）
语法：
格式：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'可以避免出现⽂字连写现象 */
复制代码代码如下:body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }
Gecko核⼼浏览器注意事项：
属性值设为auto时有个20px的渲染阈值，这个阈值可以通过更改偏好设置_quality_min_font_size这⼀项。（对于Firefox，⾸先在浏览器键⼊about:config回车即可进⼊，更多更改配置选项的⽅法参见这⾥/Editing_configuration），如果你想了解更多有关mozilla _quality_min_font_size的介绍可以查看官⽅⽂档/_quality_min_font_size。
optimizeSpeed选项在Gecko2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)上⽆效。因为⽂本渲染的标准代码已经⾜够快，没有⽐它更快的代码路径。这是⼀个bug。参见bug 595688 ./show_?id=595688
浏览器兼容表：
存在的问题：
混合使⽤optimizeLegibility和font-variant: small-caps会导致small-caps渲染失败。最糟糕的情况是⽂本不显⽰在Web页⾯上，在低配置的移动设备上可能导致页⾯⽆法正常加载。（问题bug原⽂/p/chromium/issues/detail?id=51973）
对Safari 5，使⽤ex作为 margin, padding, border-width ,outline-width的度量单位，同时使⽤optimizeLegibility会导致浏览器崩溃。不过本⼈测试Safari 5.1.7(7534.57.2)中⽂版貌似已经修复了崩溃的问题。（测试页⾯地址/safari_）
发布评论