浏览器能弥补宋体缺陷?

二月 14th, 2006 8 Comments »

曾经在《文字,你到底能多大?—分析网页文字的字号》一文中分析了绝对字号的大小;在《用外国人的手写中国字》一文中讨论了相对字号的应用。本文将讨论中文绝对字号在浏览器的缩放显示过程中的显示效果。

先来说一下宋体中文的显示效果。宋体文字显示成12px、13px、14px、15px、16px、18px以及25px+的时候,效果是比较理想的。

下图是宋体不同字号文字在浏览器(IE7 beta除外)中显示的效果:
uploads/200603/07_025356_1226.gif
从图中可以看到,当宋体显示为17px、19px-24px时,易出现锯齿、笔画不均的现象。显示为25px以上时,文字边界被平滑处理,但是明显不如12px或14px时显示的那样清晰。

浏览器是如何放大页面文字的:

当我们将网页上的文字放大的时候,实际上是使文字以另外一个较大的字号显示。比如,在Firefox中,一个14px的中文被放大一挡的时候,显示为15px;再放大一挡则显示为17px。当Firefox将文字放大为17px的时候,显示效果也是不理想的,象IE中显示17px中文一样的不理想。

在我们的印象中,似乎是IE浏览器不能缩放,而其它浏览器(比如,Firefox、Opera…)可以,可以缩放文字甚至是整个页面。而实际上它们的区别是,IE浏览器只能对相对字号起作用,其它浏览器对相对、绝对字号都有效。不过,无论是哪一个都没能克服宋体“12-16px、18px”的局限。

下面,我们来看看目前几个主流浏览器的缩放功能:

Mozilla Firefox

Firefox的“缩放功能”是缩放文字大小,而不改变页面上的其它元素。在“查看-文字大小”中,用户可以选择放大或缩小文字的显示。无论使用的是相对字号还是绝对字号,一视同仁。

Firefox的“缩放功能”只提示通过chtrl+“+/—”可以放大或缩小文字,并没有显示当前的缩放倍数。所以,在这里,我只能用“放大一挡…”来描述。下表是12px的宋体文字在Firefox中,逐级放大后的效果:
uploads/200603/07_025516_biaoff.gif
在12px-18px的区间里,出现了17px。虽然,用户将12px的文字放大4档,显示为17px的可能性并不大,但是,将12px放大两档,显示为14px的需求还是存在的,而此时,页面上原本是14px的文字正好显示为17px。原本完美的14px变得惨不忍睹了。

Opera

Opera的缩放功能是将页面整体缩放,文字、图片、gif动画、flash动画,网页上的所有内容无一漏网。这个功能最接近真实的放大镜。“如果您觉得网页太小了,那就给您来一个放大镜。”这个放大镜最多可以将页面放大为原先的1000%,当然,多数用户是没有必要这样浏览网页的,并且此时浏览器的响应异常缓慢。这种整体放大可以保证页面的布局基本不变。在IE7 beta出现之前,Opera是唯一一个能将页面整体放大的浏览器。

下表是12px的宋体文字在Opera中,逐级放大后的效果:
uploads/200603/07_025624_biaoopera.gif
在12px-18px的区间里正好跳过了17px,完美!使用1024×768分辨率的用户如果希望放大写显示页面,可以将显示比例调整为120%。这样原本12px的文字变成14px,原本14px的文字显示为16px。页面宽度由760px变为912px,在1024×768的分辨率下,浏览器的显示宽度约为1000px。一切都这么理想。难道是在天堂?

Netscape

Netscape的缩放功能与Firefox相似,只缩放文字,图片不变。使用ctrl+“+/—”操作,页面可以逐级被放大为120%、150%、200%。下表是12px的宋体文字在Netscape中,逐级放大后的效果:
uploads/200603/07_025706_biaons.gif
似乎放大比例的变化量太大了。实际上,Netscape还提供了更精确的缩放功能,通过菜单栏的选择,用户可以输入任意的整数,调整缩放比例,只是操作起来不方便。

Internet Explorer

IE6的windows版中只支持文字大小的缩放,似乎和Firefox、Netscape相同。不过,IE的“文字大小”功能只针对相对字号的文字。相对字号在“文字大小”不同的设置中显示出的字号,如下表所示:
uploads/200603/07_025738_biaoie6.gif
如果页面使用的是绝对字号,那么IE6则完全不能缩放文字。这在《用外国人的手写中国字》中已经讨分析过了。下面来看IE7 beta。

在IE7 beta版中,保留了“文字大小(Text Size)”功能不变,另外提供了页面缩放功能。在页面的右下角用一个百分比的下拉菜单显示。

这个功能是将整个页面放大、缩小,页面上的其它元素也随之变化。不管是固定字号还是相对字号都可以缩放,与Opera的功能一样。只是在显示为140%的时候,12px的文字显示为17px,而Opera是16px。下表中可以看到,宋体12px的文字在不同缩放比例中的字号大小:
uploads/200603/07_025810_biaoie7.gif
再重复一遍,这里说的是“页面缩放”功能,而不是“文字大小”功能。IE7 beta中“文字大小”功能与IE6相同,仍旧是针对相对字号的功能。对于使用相对字号的网页,在IE7 beta中可以将“页面缩放”功能与“文字大小”功能配合起来使用。

在12px-18px的区间里出现了17px,遗憾!不过,还好,IE7 beta对文字显示进行了优化,这些原本显示得很难看的字号变得漂亮了不少。

IE7 beta对文字显示的优化:

下图左侧是12px-26px的宋体文字在IE7 beta中的显示效果,右侧是文章开始时候看到的那张图---在除IE7 beta以外的浏览器中的显示效果:
uploads/200603/07_025915_ie71226.gif
这个对比中我们可以看到,IE7 beta对于原来显示时有锯齿、笔画粗细不均的字号进行了优化,比如,17px,19px…文字的边缘做过平滑处理后,虽然不如14px那么清晰,但是至少比原先有锯齿且笔画粗细不均的显示要好很多了。25px+的字号也略有改善,比原先更“黑”了些,看上去更清楚了点儿。

浏览器的升级带给我们什么?

在IE7 beta推出之前,IE是唯一一个不能调整绝对字号显示大小的浏览器(但是却占有绝大部分市场)。如果在IE7的正式版中仍旧保留beta版中的页面缩放功能的话,那么主流浏览器就全部能支持“调整绝对字号显示大小”这个功能了。如果是这样,那么,“是否需要将文字设置为相对字号?”的问题就解决了。

软件功能的改善,解决了一个网页设计的问题。让我们为IE欢呼吧:“IE,你好伟大啊!你终于实现了别人早就有的功能了!”

-----------------------------------
本文于2006-02-13发表于蓝色理想

有8 条对“浏览器能弥补宋体缺陷?”的评论

  1. lzq411 说:

    其实这不是IE7的作用。而是微软Cleartype技术。XP就已经内置该技术
    只要在XP上,用右键点桌面,打开显示属性,选外观,点效果,然后点上“使用下列方式是字体边缘平滑”的勾,再将“标准”换为“清晰”,即开启了Cleartype。所有的字体都达到了你上述左图的效果,IE6也行。
    IE7只是强制使用cleartype技术而已。
    参看tech.163.com/06/0307/16/2BKHAV3B00091589.html

  2. 臭鱼 说:

    lzq411,你说的对,在blueidea里我回复了。

  3. brink 说:

    很好的文章。
    更关心的是ie7.0的图形+文字“全页面”放大功能会对今后的网页设计有哪些影响。比如位图被放大的马赛克化,还有背景图是不是也会成比例放大?如何避免放大后的页面布局变形。。。能否在这方面多谈谈,当然现在说这个似乎有点早,不过ie用户在比例上是占绝对优势的,估计ie7的升级也不太远了

  4. 臭鱼 说:

    文章最后一部分说的就是“全页面放大功能”会对今后的网页设计的影响,如果以后的浏览器都能放大文字了,那么恐怕就不用给页面设置相对字号了。

    至于,位图被放大的马赛克化,还有背景图是不是也会成比例放大?如何避免放大后的页面布局变形?或许还要等IE7正是发布出来才能有所体验吧,毕竟现在的beta版中还有很多不确定的因素。

  5. john2218 说:

    做为一名OPERA的铁杆级粉丝。
    为OPERA的再一次胜利欢呼。

  6. badst 说:

    欢呼一下!
    IE,你好伟大啊!你终于实现了别人早就有的功能了!

    Microsoft的升级频率总是很慢,总是很大,总是给人带来太多期待。

  7. king62 说:

    “文字,你到底能多大?—分析网页文字的字号”和“用外国人的手写中国字”两个链接失效了

  8. icons set 说:

    To me it is not clear.

    P.S. Please review Icon Design Pack from iconsofgirls45

发表评论

您的大名: