text-rendering 详解
author: feeldesignstudio.com
Text-rendering 属性是一个非标准属性，主要用来告诉渲染引擎（rendering engine）渲染文字的时候如何来优化，浏览器根据这个属性来权衡速度、易读性、几何精度等方面。
暂时只有Gecko（Firefox）and WebKit（Safari 或 Chrome）支持这个属性。
注：
Gecko是套开放原始码的、以C++编写的网页排版引擎。目前为Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。
现在浏览器的内核引擎，基本上是四分天下：
Trident: IE 以Trident 作为内核引擎;
Gecko: Firefox 是基于 Gecko 开发;
WebKit: Safari, Google Chrome,傲游3 基于 Webkit 开发。
Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini
Text-rendering属性有如下取值：
|
取值 |
描述 |
|
auto |
浏览器为速度、易读性、几何精度等自动优化来绘制文本
在实践中，Gecko桌面浏览器（Firefox）如果字体大小为20 px或者更大，会使用optimizeLegibility；否则对于较小的文本使用optimizeSpeed |
|
optimizeSpeed |
绘制文本时速度优先，会禁用字距调整和连字 |
|
optimizeLegibility |
绘制文本时易读性优先，会启用字距调整和连字 |
|
geometricPrecision |
绘制文本时几何精度优先，暂时和optimizeLegibility相同 |
明显的效果是optimizeLegibility 在文字较小（20px以下）的时候，在一些特殊字体设定下（如Microsoft’s Calibri、Candara等）启用了连字（比如 ff、fi、fl）
下面是一些例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-rendering</title>
<style>
body {
text-rendering: auto;
}
p {
margin: 20px 0;
font-size: 30px;
}
p.auto {
text-rendering: auto;
}
p.optimizeSpeed {
text-rendering: optimizeSpeed;
}
p.optimizeLegibility {
text-rendering: optimizeLegibility;
}
p.geometricPrecision {
text-rendering: geometricPrecision;
}
</style>
</head>
<body>
<p class="auto">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="optimizeSpeed">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="optimizeLegibility">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="geometricPrecision">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
</body>
</html>
注意下面的图片中顺序是:
- text-rendering: auto;
- text-rendering: optimizeSpeed;
- text-rendering: optimizeLegibility;
- text-rendering: geometricPrecision;
Chrome：
Chrome text-rendering 默认宋体
Firefox：
Firefox text-rendering 默认宋体
换个字体，小于20px：
p {
font: 19px 'DejaVu Serif', Constantia;
}
Chrome：
Chrome text-rendering 小于20px
Firefox：
Firefox text-rendering 小于20px
换个字体，大于20px：
p {
font: 30px 'DejaVu Serif', Constantia;
}
Chrome：
Firefox：
可以比较明显的看出，不同的text-rendering属性在Chrome下的区别比较明显，在Firefox下基本上没有区别。
http://jnoodle.github.io/2013/05/text-rendering
http://www.feeldesignstudio.com/2013/05/text-rendering
© 未标明转载均为原创，在满足创作共用版权协议的基础上欢迎转载，请注明作者和出处链接
