CSS 文本渲染属性text-rendering的介绍和使用示例

所属分类: 网页制作 / CSS 阅读数: 450
收藏 0 赞 0 分享
摘要:

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'可以避免出现文字连写现象 */

复制代码
代码如下:

body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }

 

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

浏览器兼容表:

 

存在的问题:

混合使用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)
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多