您的位置: 首页 > 技术文档 > 网站建设 > 浏览器能弥补宋体缺陷?
为什么要进行“标准” 回到列表 购物网站交互设计上的缺陷
 浏览器能弥补宋体缺陷?

作者:臭鱼 时间: 2006-02-13 文档类型:原创 来自:蓝色理想

作者BLOGhttp://chouyuchouyu.bokee.com

本文将讨论中文绝对字号在浏览器的缩放显示过程中的显示效果。

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

下图是宋体不同字号文字在浏览器(IE7 beta除外)中显示的效果:

从图中可以看到,当宋体显示为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中,逐级放大后的效果:

在12px-18px的区间里,出现了17px。虽然,用户将12px的文字放大4档,显示为17px的可能性并不大,但是,将12px放大两档,显示为14px的需求还是存在的,而此时,页面上原本是14px的文字正好显示为17px。原本完美的14px变得惨不忍睹了。

Opera

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

下表是12px的宋体文字在Opera中,逐级放大后的效果:

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

Netscape

Netscape的缩放功能与Firefox相似,只缩放文字,图片不变。使用ctrl+“+/—”操作,页面可以逐级被放大为120%、150%、200%。下表是12px的宋体文字在Netscape中,逐级放大后的效果:

似乎放大比例的变化量太大了。实际上,Netscape还提供了更精确的缩放功能,通过菜单栏的选择,用户可以输入任意的整数,调整缩放比例,只是操作起来不方便。

Internet Explorer

IE6的windows版中只支持文字大小的缩放,似乎和Firefox、Netscape相同。不过,IE的“文字大小”功能只针对相对字号的文字。相对字号在“文字大小”不同的设置中显示出的字号,如下表所示:

如果页面使用的是绝对字号,那么IE6则完全不能缩放文字。这在《用外国人的手写中国字》中已经讨分析过了。下面来看IE7 beta。

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

这个功能是将整个页面放大、缩小,页面上的其它元素也随之变化。不管是固定字号还是相对字号都可以缩放,与Opera的功能一样。只是在显示为140%的时候,12px的文字显示为17px,而Opera是16px。下表中可以看到,宋体12px的文字在不同缩放比例中的字号大小:

再重复一遍,这里说的是“页面缩放”功能,而不是“文字大小”功能。IE7 beta中“文字大小”功能与IE6相同,仍旧是针对相对字号的功能。对于使用相对字号的网页,在IE7 beta中可以将“页面缩放”功能与“文字大小”功能配合起来使用。

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

IE7 beta对文字显示的优化:

下图左侧是12px-26px的宋体文字在IE7 beta中的显示效果,右侧是文章开始时候看到的那张图---在除IE7 beta以外的浏览器中的显示效果:

这个对比中我们可以看到,IE7 beta对于原来显示时有锯齿、笔画粗细不均的字号进行了优化,比如,17px,19px...文字的边缘做过平滑处理后,虽然不如14px那么清晰,但是至少比原先有锯齿且笔画粗细不均的显示要好很多了。25px+的字号也略有改善,比原先更“黑”了些,看上去更清楚了点儿。

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

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

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

出处:蓝色理想
责任编辑:moby

◎进入论坛网站综合网页制作版块参加讨论

作者文章 更多作者文章
购物网站交互设计上的缺陷
用外国人的手写中国字
在新窗口中 vs 在同一窗口中
也许那是一个广告?
分析网页文字的字号
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2