微软在新版的IE9.0浏览器引进了次像素(sub-pixel ClearType)超清晰显示技术定位,作为浏览器加速渲染HTML 5文本的硬件部分。通过IE9测试版,我们收到了很多关于次像素的反馈以及对其未来发展的疑问。这些疑问应该引起网站开发者的注意。但由于Windows用户通过调整有益于显示ClearType,我们就从这项技术开始讲起。
调整 ClearType
为获得最佳结果,您应该把Clear Type Tuning作为您的指定显示硬件。
Windows 7 用户可以打开控制面板下的外观和主题,进入字体选项,选择调整为Clear Type字体,通过此内置的Clear Type来调节Clear Type设置。(第二页内容中将会对此作出诠释)。 Window Vista用户可以用通过在线调谐器来调节。(在线调谐器只能在IE浏览器中使用,因为它是由Activex控件控制。)
ClearType 以及sub-pixel positioning (次像素渲染)通过开发液晶显示器上特定的硬件规格参数来传递改进的字体显示质量,此技术超过了传统形式的滑屏幕字体边缘技术及抗混叠技术。以此来改进带有数字接口的彩色液晶显示器的文本清晰度,比如手提电脑或是高级平板显示器的文本清晰度。CRT显示器的文本清晰度也可以有所改进。
次像素字体对于网站开发者有什么意义?
当测量或使用次像素字体时,网页上的文本将会横跨不同的显示分辨率和变焦因素。次像素定位提供了ClearType字体,尤其是字号很小时,特别是在小尺寸屏幕上,字符可以显示最准确的间距。次像素和全像素的区别代表重要的字符宽度比例,它允许文本在理想的分辨率进行测量,并在其空间呈现自然的位置。这意味着,在网页上的文本换行符不会在不同的用户设置之间切换。
所有的
IE9文档模式中均应用ClearType文字渲染。IE9默认的标注模式中则应用次像素定位. IE9兼容模式选项中的
IE7和
IE8则应用全像素文本规则。
旧版本的
IE浏览器使用全像素文本规则,字体大小,字符宽度已及行高均调整至最接近的像素指标。例如,IE8中如果你要求10号字体,那么显示的是13像素的字体,即便数学上精确的换算得到的应该是13.333像素。以下表格显示了各字体大小对应的点数。
所要求的字体大小 |
精确像素 |
圆形像素 |
IE8上获得的字号大小 |
IE9上字号大小的改变 |
8pt |
10.67px |
11px |
8.25pt |
Smaller |
9pt |
12 |
12px |
9pt |
None |
10pt |
13.33px |
13px |
9.75pt |
Larger |
11pt |
14.67px |
15px |
11.25pt |
Smaller |
12pt |
16.px |
16px |
12pt |
None |
14pt |
18.67px |
19px |
14.25pt |
Smaller |
16pt |
21.33px |
21px |
15.75pt |
Larger |
18pt |
24px |
24px |
18pt |
None |
使用IE9默认的标准模式, 显示的就是你要的字体。你要10号字,显示的也是10号字(13.33像素),比IE8或之前的版本得到的要大一些。同样的,在IE9中,8号字小了25%。
次像素VS全像素:显示的不同
要了解次像素对网页有什么作用,就要了解旧版本IE浏览器的字体如何运行。以下两张表格对比了四种不同字体中两种字号大小。
第一张表格中,示例的字体大小及行高是由像素决定的,分别为12PX和16PX。在IE9和传统模式均使用同样的字号大小和行间距。这使得次像素及全像素宽度的不同之处从中分离出来。你会发现,下列表里,IE9的次像素宽度通常会比IE8的全像素宽度要窄些。这是是典型的正常字号,粗体字通常要宽些。第三行用的是Georgia字体,区别就更加明显了。
IE9次像素尺寸 |
IE8全像素尺寸 |
您的浏览器 |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
font-size: 12px; line-height: 16px; font-families (top to bottom): Verdana, Arial, Georgia, Times New Roman |
在此第二个例子里,我采用了8PT字号,行间距1.3em.从上图我们可以看到,在以前的IE版本里,8PT字号是在上需要的是11PX或者8.25pt的字体。以下的区别是次像素和全像素宽度的区别,次像素的字体更小且更精确的。而全像素宽度的字体更小。
IE9次像素宽度 |
IE8全像素宽度 |
您的浏览器 |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
|
|
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium. |
font-size: 8pt; line-height: 1.3em; font-families (top to bottom): Verdana, Arial, Georgia, Times New Roman |
如果你仔细研究上诉的两个例子,你会发现,所有字体的大写字母高度和X高度都一样,但是字母的宽度和行间距是不一样的。次像素显示的字母宽度和行间距正好符合要求的字体,而在全像素显示的字体则更圆润。
关于变焦和定标影响
我发现,用次像素技术测量或者显示的问题,缩放和分辨率是独立的。这很重要。因为目前越来越多的笔记本电脑拥有高分辨率的显示器。使用此种显示器,IE浏览器则默认变焦为125%。
下图表明了IE8运用全像素宽度时发生些什么。 注意,在120%比例时,“pellentesque”单词是在第五行,而100%比例时此单词在第六行。
此种改变是由于行宽改变的结果。下图则表明了变焦为125%的字体覆盖到变焦为100%拉伸了1.25倍的字体上:
你可以看到,125%变焦的字体每行都比放大的变焦100%的字体还要短。这是因为变焦越小,全像素定位的误差越大。
同样的例子在使用次像素定位的IE9中则显示如下:
你甚至都看不到有任何区别。这是因为缩放100%的次像素宽度与125%次像素宽度一致。此种均匀定标是次像素定位的好处之一。在IE9中,所有的换行符都是一样的而在IE8中,换行符则不同。也就是说,在开发网站时,由于用户无预期的放大或缩小,网页的布局也有可能不同。
对未来已准备就绪
IE9的次像素字体大小和字体宽度是迈向未来发展的重要一步。以上IE9的示例解释了我们所说的变焦,缩放,独立的文本尺寸。这是文本的一个重要特征。我们逐渐往高分辨率显示发展,单指缩放已经是文本中重要的成分。比如SVG,HTML5 canvas 元素, CSS 2维变换即将统一文本的缩放比例。
网络开发者要注意,使用次像素字体大小,显示的就是你要求的大小。网页设计者应该有不时的监控字体之间以及默认字体的区别。对次像素字体的介绍使其更加重要。其好处就是网页设计者在设备分辨率及缩放比率独立性方面看起来一样。(本文翻译有些地方不太通顺,还请您见谅,点此
查看原文 )
标签:IE相关IE9字体浏览器相关Sub pixel次像素