网页字体在不同浏览器显示不同结果

网站中常用见的字体就是“宋体”。但现在很多电子商务网站都会有标价,这就涉及到了符号和数字,然后品牌和内容中又会有英文和字母,这就又涉及到英文字体,光用“宋体”会不协调。因为“宋体”本身是为中文字符设计的,符号、数字和英文、字母当然也应该使用英文字体来定义显示才会更合适。

前几天做一个项目我们决定使用 font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋体),sans-serif 的字体显示顺序(先别管合理不合理),我们测试了IE6/IE7/IE8/Firefox/chrome/(使用以上几款浏览器访问我们网站的用户加起来占90%以上),在IE7/IE8浏览器中显示英文和数字时字体有区别(见下图)


“Aisleep”和“88”感觉上面有明显的锯齿而下面的感觉粗厚平滑一些。

大家知道,这是因为IE7/IE8浏览器中[属性] > [高级]选项卡 > [多媒体]有一个ClearType(
增强屏幕字体)属性,默认是被选中的原因(见下图)。

如果把这个选项去掉勾,那IE7/IE8浏览器显示的字体就和其它浏览器统一了。反之,通过Windows控制面板 > ClearType Tuning 启用ClearType(见下图)

对于操作系统控制面板没有ClearType Tuning选项的可以通过以下方式实现:

1. 单击[开始],单击[控制面板],单击[外观和主题], 然后单击[显示]。
2. 在[外观]选项卡上,单击[效果]。
3. 单击选中[使用下列方式使屏幕字体的边缘平滑]复选框,然后单击该列表中的 ClearType[清晰]。

那以其它浏览器显示的字体就会和IE7/IE8统一了。(注:据我调查大多数XP操作系统默认为“标准”)

接下来会看到一些测试和整理,目的只是为了解字体在不同设置下的特性。这里不会有什么字体的推荐设置,因为我认为字体的设置和你所做项目的具体情况有关,没有什么设置是最好的,只要清楚字体在不同设置下的特性才能在以后的应用中得心应手。

测试:12px和14px的字体大小是中文网页中最常见的;字体family:黑体,宋体,sans-serif,Verdana,Tahoma,Arial,Helvetica(没用雅黑字体,雅黑字体在Vista以后的操作系统才有,但根据网站数据统计80%都是XP操作系统,目前兼容性会是个问题);文字加粗容易分辨区别,浏览器:IE6/IE7/IE8/Firefox3.6/Chrome4.0。下图显示效果不好,这里访问→http://docs.google.com/View?id=ds4hm4h_241f5cpdkff

整理:
从 ClearType角度:除了IE7/IE8外其它浏览器字体显示效果都是一样的,如何统一所有字体显示效果,方法上面已经说过。

* 黑体:字体大小12px/14px时 ClearType设置有作用(16px/18px/20px时无作用,22px以上会有作用);
* 宋体(\5b8b\4f53):字体大小 12px/14px/16px/18px时ClearType设置无作用(20px以上会起作用),所以 12px-18px之间的宋体在所有以上浏览器中能得到高度统一,但粗体的符号显示真的很不理想比如"@";
* sans- serif:无衬线字,细心的一定发现唯独这类字体上图中出现了三种字体。在IE6和IE7/IE8中区别只是ClearType设置问题,字体其实就是Tahoma(无衬字),但在FireFox和Chrome中调用的是宋体(衬字)(可设置);
* Verdana:ClearType设置会有作用,IE6/FireFox/Chrome中有明显的锯齿。
* Tahoma:ClearType设置会有作用,IE6/FireFox/Chrome中有明显的锯齿。(仔细观察其实 Verdana和Tahoma字体外形是差不多的,只是单词中字母间距的区别。)关于Verdana和Tahoma再延伸一下,之前看到过根据 Jackob Nielsen用户调研显示,Verdana 字体是易读性最高的,推荐设置为第一默认字体,前提那是英文站点。但在中文站点又要老生长谈中英文排版问题,具体用什么字体要考虑文章中是否有斜体、粗体:
o 当ClearType设置为“标准”时,Tahoma比Verdana锯齿感强,而且Verdana字母的间距较宽的优势会体现出来。

o 当ClearType设置为“清晰”时,Verdana和Tahoma效果相近。

至于说Verdana由于字母间距的问题导致中文结合时效果不佳,各位有时间可以看看样稿http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp,对平常的浏览和排版的影响是微乎的(Verdana的字体文章会更长一些),如果我不那么刻意去比,几乎是看不出来的,何况是大多用户(我做过测试把两种字体的文章分开,分别给朋友、同事、家人等不是专业领域的人看,Ta们没有任何意识,并且在我指出字体区别后,他们对我说:“你也太无聊了吧?”)。所以具体用什么字体时,最关键还是考虑字体用在什么对象(系统、访问者)上,然后是字体是否会涉及到的变化:大小、斜体、粗体。
* Arial 和Helvetica:以上浏览器中视觉上几乎是一致的(IE7/IE8中感觉上颜色偏深一些),无锯齿感觉,但和Verdana、Tahoma 比起来整体偏小很多。可以把字体设置的大一些,CSS样式中就会多一行特殊的定义。

本文来源:http://www.08show.com/blog/article.asp?id=337

时间: 2024-08-29 04:31:22

网页字体在不同浏览器显示不同结果的相关文章

chrome浏览器64位部分网页字体无法显示怎么办

  chrome浏览器64位部分网页字体无法显示解决办法:1:在chrome浏览器输入栏输入"chrome://flags " 2:按住"ctrl"+"F" ,会有查找输入框.输入"DirectWrite ..."就可以看到要找的"DirectWrite Windows"禁止该项就解决问题了.

电脑浏览器打开网页字体显示模糊如何解决

  电脑浏览器打开网页字体显示模糊如何解决           方法一:XP系统 1.右击桌面空白处,选择属性; 2.点击外观,再点效果,调成清晰即可,然后按确定,可能需要重启计算机,重启后即可看到不模糊的网页; 方法二:Win7以上系统 1.右击桌面空白处,选择个性化--显示; 2.点击左上角"调整ClearType文本"; 3.勾选"启用ClearType",确认启用后点击下一步; 4.完成调整即可. 方法三:通过NVIDIA显卡设置 1.右击桌面空白处,打开&

搜狗浏览器网页打不开或显示不正常的解决方法

  搜狗浏览器是很多电脑用户都在使用的浏览器之一,它最大的特点就是它的高速模式.不过,也有一些搜狗浏览器的用户遇到一些网页打不开,或者网页显示不正常的情况.小编亲测之后发现,是由于这一些网站较陈旧,才会导致网页打不开的情况.下面,小编就给大家分享两个解决搜狗浏览器网页打不开或显示不正常的方法! 1.高速/兼容模式切换 搜狗高速浏览器支持"高速模式",可以明显提升网页访问速度,极少数的一些网站暂时还没有很好的支持这种模式,您可以通过点击地址栏网址左侧的"闪电图标",将

XP系统下IE浏览器显示的字体效果问题

  XP系统下IE浏览器显示的字体效果问题          说到这个效果,唯独WIN7以上的系统,IE8以上版本才能很好不需要图片展示出来,为了兼容IE6和IE7,经过数小时测试,只好采用背景图. 字体在IE6/IE7/IE8/Chrome下的测试效果如下图: 在原版的XP系统下,IE6和IE7对于字体支持似乎不是特别的好.上次提到过中文字体似乎对于中文标点都不能正常显示出来,更不要提英文字符对汉字的支持了.正是这个原因上期的背景图解决IE6和IE7字符替换问题费了很大的 功夫,这次简要总结一

2345智能浏览器网页字体突然变大怎么办?

怎么回事?正在浏览网页字体突然变大了,如下图所示,这网页要怎么接着看?别担心你可能是不小心使用了ctrl把网页给放大了.下面小编教你让网页快速恢复正常. 方法一:按住键盘组合键ctrl+鼠标滚轮或ctrl + = / ctrl + -,这样就会对页面进行放大缩小调整. 方法二:直接点浏览器右下角的缩放进行选择,选回默认的100%即可,如下图所示: 看,网页已经恢复正常了,如下图所示.你可以记住这个有用的小技巧哦.

win8系统打开360浏览器发现网页字体变模糊怎么办

  许多win8系统比较喜欢安装使用360浏览器,使用浏览器的时候难免会遇到一些问题.最近有Win8系统用户反映,打开360浏览器时发现网页上的文字变得模糊了,一些文字根本看不清.但又不知道是什么原因造成的,怎么办?有什么方法可以解决此问题呢?其实解决方法很简单,下面小编介绍win8系统打开360浏览器发现网页字体变模糊的解决方法. 解决步骤: 1.先给大家看一下我电脑上的浏览器出现的问题; 2.找到浏览器上"工具"选项卡,然后,找到"Internet选项"; 3.

ie-win10网页字体图标显示不出来

问题描述 win10网页字体图标显示不出来 win10系统IE浏览网页字体图标显示不出来,Edge显示正常,用猎豹浏览器也显示不出来,之前win7系统都正常,有什么办法修复么 解决方案 从win7电脑中找到对应的字体复制过来或者使用 webfont

浏览器-重装系统后网页中部分图片不能显示

问题描述 重装系统后网页中部分图片不能显示 在重装系统之后多个浏览器中的部分图片不能显示出来 网上介绍的许多方式都尝试过没有解决 求解 解决方案 刚刚重装系统,有差不多的情况,个人建议首先对浏览器更新,若浏览器是较新的版本则更新下flash.还有个可能就是点击浏览器的"工具"-"Internet 选项"-"高级"将显示图片的勾划上. 解决方案二: 这个应该跟系统无关的,你可以跟新下浏览器 解决方案三: 在浏览器设置里面进行操作,可以恢复默认设置

如何获取一个网页的html文件,并删除一部分内容再交付浏览器显示?

问题描述 如何获取一个网页的html文件,并删除一部分内容再交付浏览器显示? 主要是想做一个简单的弹窗拦截,刚刚接触几乎什么都不懂,求基本方法和相应工具,谢谢! 解决方案 虽然不是很清楚你要干什么,初步猜测是你在访问网站时,有弹出的广告之类.你可以用浏览器的开发模式把相关弹出的js代码删掉,但是入股刷新还会复原的.你毕竟不能改其他网站的服务器代码 解决方案二: 浏览器插件,插入js到对应的窗口,然后Javascript来隐藏某些内容