• 字体
  • 字体家族
  • 字体公司
  • 字体设计师
  • 字体样张
  • 资讯
  • 视频
字客网>资讯>详情

还是网页字体这事

时间:2010-03-05 13:01:26| 业界|浏览:6|作者:fontke
导语网站中常用见的字体就是“宋体”。但现在很多电子商务网站都会有标价,这就涉及到了符号和数字,然后品牌和内容中又会有英文和字母,这就又

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

前几天做一个项目我们决定使用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选项的可以通过以下方式实现:

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

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

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

测试:12px和14px的字体大小是中文网页中最常见的;字体family:黑体,宋体,sans-serif,Verdana,Tahoma,Arial,Helvetica(没用雅黑字体,雅黑字体在Vista以后的操作系统才有,但根据网站数据统计80%都是XP操作系统,目前兼容性会是个问题);文字加粗容易分辨区别,

下图显示效果不好,这里访问→http://docs.google.com/View?id=ds4hm4h_241f5cpdkff

浏览器:IE6/IE7/IE8/Firefox3.6/Chrome4.0。

整理:

从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 字体是易读性最高的,推荐设置为第一默认字体,前提那是英文站点。但在中文站点又要老生长谈中英文排版问题,具体用什么字体要考虑文章中是否有斜体、粗体:当ClearType设置为“标准”时,Tahoma比Verdana锯齿感强,而且Verdana字母的间距较宽的优势会体现出来。

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

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

Arial和Helvetica:以上浏览器中视觉上几乎是一致的(IE7/IE8中感觉上颜色偏深一些),无锯齿感觉,但和Verdana、Tahoma比起来整体偏小很多。可以把字体设置的大一些,CSS样式中就会多一行特殊的定义。

参考:

使用 ClearType 增强屏幕字体http://support.microsoft.com/kb/306527/zh-cn细说字体 Sans Serif 与 Serifhttp://yx.takeback.net/121/serif-font.html无衬线体http://zh.wikipedia.org/wiki/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93

15.3 Font family: the ‘font-family’ propertyhttp://www.w3.org/TR/CSS21/fonts.htmlweb-default-fonthttp://lifesinger.googlecode.com/svn/trunk/lab/2009/web-default-font.html微软雅黑http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91

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

0
更多还是网页字体这事敬请关注字客网!
还是网页字体这事 网友点评
游客:文明上网,理性发言。 看不清?换一张
还是网页字体这事 最新评论
暂无相关评论
精彩点评
  • 游客评论免费商用中文字体有哪些?字体资讯

    新蒂字体 授权使用: 无需备案免费使用的情况: 在个人电脑上安装、打印个人文档、个人网站、博客、微博配图 需要备案免费使用的情况: 设计有可能商用的稿件(在商用时购买商业授权)、用于免费提供给他人的印刷品(印量在500份以内,且无需获得印刷品行政许可)的情况、用作没有品牌冠名的公益广告、用作完全免费(不能含有收费项目)的软件及网络服务。 需要购买个人授权的情况: 个人网店的装饰、个体商...
  • 游客评论免费商用中文字体有哪些?字体资讯

    太有用了,感谢作者
  • 天天刺绣评论耗时2年他重新设计34省市图形字体字体资讯

    设计的好棒!漂亮!稀饭!
  • Jaja评论40款高质量英文设计字体字体资讯

    怎么下载啊~
  • 简MEN评论七招打造有逼格的字体字体资讯

    有一款想要的字体,就是下来屯
  • chill评论40款高质量英文设计字体字体资讯

    地址呢?