欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

程序员文章站 2023-11-12 13:46:52
在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程...

   例如,我们使用以下的字体设置(先别管合理不合理)

  font-family:verdana,tahoma,arial,5b8b4f53(宋体),sans-serif

  让后分别放在ie6、ie7、ie8、firefox、chrome等主流浏览器中测试,发现在ie7和ie8浏览器中显示英文和数字时字体有区别(见下图)

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程
在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

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

  大家知道,这是因为ie7/ie8浏览器中[属性] > [高级]选项卡 > [多媒体]有一个cleartype(

  增强屏幕字体)属性,默认是被选中的原因(见下图)。

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

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

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

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

  1. 单击[开始],单击[控制面板],单击[外观和主题], 然后单击[显示]。

  2. 在[外观]选项卡上,单击[效果]。

  3. 单击选中[使用下列方式使屏幕字体的边缘平滑]复选框,然后单击该列表中的 cleartype[清晰]。

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

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

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

  测试:12px和14px的字体大小是中文网页中最常见的;字体family:黑体,宋体,sans-serif,verdana,tahoma,arial,helvetica(没用雅黑字体,雅黑字体在vista以后的操作系统才有,但根据网站数据统计80%都是xp操作系统,目前兼容性会是个问题);文字加粗容易分辨区别,浏览器:ie6/ie7/ie8/firefox3.6/chrome4.0。

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

  整理

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

  * 黑体:字体大小12px/14px时 cleartype设置有作用(16px/18px/20px时无作用,22px以上会有作用);

  * 宋体(5b8b4f53):字体大小 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字母的间距较宽的优势会体现出来。

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

  o 当cleartype设置为“清晰”时,verdana和tahoma效果相近。

在IE浏览器(IE7和IE8)中正常显示的字体效果设置教程

  至于说verdana由于字母间距的问题导致中文结合时效果不佳,对平常的浏览和排版的影响是微乎的(verdana的字体文章会更长一些),如果我不那么刻意去比,几乎是看不出来的,何况是大多用户(我做过测试把两种字体的文章分开,分别给朋友、同事、家人等不是专业领域的人看,ta们没有任何意识,并且在我指出字体区别后,他们对我说:“你也太无聊了吧?”)。所以具体用什么字体时,最关键还是考虑字体用在什么对象(系统、访问者)上,然后是字体是否会涉及到的变化:大小、斜体、粗体。

  * arial 和helvetica:以上浏览器中视觉上几乎是一致的(ie7/ie8中感觉上颜色偏深一些),无锯齿感觉,但和verdana、tahoma 比起来整体偏小很多。可以把字体设置的大一些,css样式中就会多一行特殊的定义。

  网络上有人整理相关的字型设定,我把它转给过,给需要的网页设计师参考。

  font-family: arial, helvetica, sans-serif;

  font-family: ‘arial black’, gadget, sans-serif;

  font-family: ‘bookman old style’, serif;

  font-family: ‘comic sans ms’, cursive;

  font-family: courier, monospace;

  font-family: ‘courier new’, courier, monospace;

  font-family: garamond, serif;

  font-family: georgia, serif;

  font-family: impact, charcoal, sans-serif;

  font-family: ‘lucida console’, monaco, monospace;

  font-family: ‘lucida sans unicode’, ‘lucida grande’, sans-serif;

  font-family: ‘ms sans serif’, geneva, sans-serif;

  font-family: ‘ms serif’, ‘new york’, sans-serif;

  font-family: ‘palatino linotype’, ‘book antiqua’, palatino, serif;

  font-family: symbol, sans-serif;

  font-family: tahoma, geneva, sans-serif;

  font-family: ‘times new roman’, times, serif;

  font-family: ‘trebuchet ms’, helvetica, sans-serif;

  font-family: verdana, geneva, sans-serif;

  font-family: webdings, sans-serif;

  font-family: wingdings, ‘zapf dingbats’, sans-serif;

相关标签: IE浏览器 字体