网页设计中的默认字体
打算将淘宝的默认字体调整为:
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
理由如下:
font-size采用px, 不采用em. 理由是em带来的可用性提升很有限,同时基于em很难保证视觉设计的精确性,并且现在主流浏览器都支持“全页面缩放(Full Page Zoom)”功能,是时候不用考虑基于字体大小(em)的设计了。line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高,对于12px字体,这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。- Tahoma是Matthew Carter为微软公司设计的一款字体,从Mac OS X 10.5开始,默认也捆绑了这款字体。但在Mac OS X 10.4及其之前的系统中,没有Tahoma字体,但有一款看起来比Tahoma更典雅的系统默认字体:Helvetica. 不信你玩玩这款游戏:Helvetica vs. Arial. 个人情感上,我甚至想把Helvetica放在首位,但考虑到非Mac系统的Helvetica字体都是rip版,以及大部分淘宝用户用的是Windows操作系统,因此只能委屈Helvetica, 放在第二位。
- Arial是早期Windows英文系统的默认字体,XP和Vista上都是Tahoma了。Arial几乎在所有操作系统中都有,因此放在最后,作为一道屏障。
- 最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义,针对这部分用户,sans-serif可能能派上用场。
- 最后,无论在XP还是Vista下,不指定网页的中文字体时,默认就是宋体。因此
font-family里的'宋体'是多余的,可以省去。(Opera和Safari不认识SimSun, 用到宋体的地方,还是用'宋体'更保险)(待测试验证:不指定中文字体时,网页的默认中文字体是什么?Linux是自己配的,Mac OS X呢?还有Vista中文系统。这些环境下,哪位朋友帮忙测试下网页的默认中文字体?) - 用Tahoma字体,在中英文混排时,也有个不好的地方:

两个数字30所占的宽度,大于一个宋体汉字,导致上图中对不齐。但这仅是设计上的小不妥。调整为以冒号为基线,都向右对齐就可以避免了。
参考资料
- 谈谈网页设计中的字体应用(很好的一系列文章,学到了很多知识)
- 是时候不用考虑基于字体大小(em)的设计了(拥有自己的思考和判断非常重要,秦歌做到了)
- Mac OS X 10.5 Fonts list(从10.5开始,默认捆绑了Tahoma)
- Tahoma on Wiki
- “helvetica, arial”, Not “arial, helvetica”(国内的copy&paste太严重了,百度有啊的默认字体是
arial,helvetica,sans-serif, 雅虎中国的是arial,helvetica,clean,sans-serif, 还有一堆站点包括淘宝都犯了这个错误)

February 9th, 2009 on 23:14
关于第7点是结果是宋体,用firebug禁掉就可以看到了。哈哈 顺便沙发
February 9th, 2009 on 23:34
用Tahoma的话,IE6下划线和13px的问题解决了么?
February 10th, 2009 on 7:05
字体应该怎么设置困扰我很久了,不过一直就用px,到省得改了
February 10th, 2009 on 9:17
@第七条
windows下注册表里有指定各个字体的替补,大概是类似fallback的吧
比如tahoma下是
SimSun.TTC,SimSun
gulim.ttc,gulim
MSGOTHIC.TTC,MS UI Gothic
mingliu.ttc,PMingLiU
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLink
February 10th, 2009 on 9:29
下划线和13px的问题,无论是Arial还是Tahoma,都存在。而且在不同的系统中,症状还不同。在解决这两个问题上,Arial也没什么优势。推荐小麦的这篇文章:http://www.mikkolee.com/118
小麦提到了Tahoma的三个缺点:
问题1,在vista的ie下,Arial也有
问题2,用arial可以避免,但淘宝上很少用13px,所以可以忽略
问题3,arial和tahoma是一样的
February 10th, 2009 on 10:12
这篇文章应该也给支付宝的同学参考一下.
整个页面的字体有点乱
February 10th, 2009 on 10:51
还真没研究过页面字体的显示….囧额
受益了,一般而言都是让design搞定这些
February 10th, 2009 on 10:53
国内的网站设计通常对海外华人考虑不周啊,字体定义如果用“宋体”的话,在其他语言的操作系统上怎么办呢。。。
似乎很少有网站在异种语言环境下测试自己的网页是否正常,虽说现在UTF8已经成为主流,但这也只能是保证网页可用而已,不知道taobao能不能开个先河,也考虑一下好看的问题。。。
February 10th, 2009 on 11:47
Helvetica在网页设计的摆位没有错
但是Arial Tahoma和Verdana都是后于Helvetica出来的.
有一部专门讲Helvetica的纪录片 不知道LZ看过没
February 10th, 2009 on 11:49
不指定字体Safari/OSX10.5应该是华文细黑
February 11th, 2009 on 9:26
@lifesinger 怪了,一直以来在我的测试环境下,IE6对Arial支持是比Tahoma要好,没有下划线和13px的问题。至于那缺点三,我没遇到过。传说中用baseline垂直对齐就可以了。
February 11th, 2009 on 9:42
@JunChen Arial的表现还是不错的,我像这也许是有啊把他放在第一位的原因。特别在line-height没有设定的情况下,或者设定很小的情况下。虽然 Arial稍微难看了点。
February 11th, 2009 on 10:03
@怿飞 我是看Google也全线使用的Arial所以。
February 11th, 2009 on 14:44
目前还是arial更保险,事实上用户也不会有那么敏感。
February 11th, 2009 on 14:52
字体问题和HTML的编码也有关系
UTF-8默认老是英文,设置了宋体也有时不生效
郁。。。
February 12th, 2009 on 16:12
@JunChen Tahoma的下划线问题刚才在xp下的ie6测试了一下,字体大小为12px时,下划线贴的很紧,比较难看,字体大于12px好像没有这个问题,至于博主说vista的ie下,Arial也有这问题,晚上回去测试一下;
13px的问题博主已经说了,可以用Arial可以避免。
February 13th, 2009 on 9:37
@sopp 你所说的是系统的字体映射,通常在windows桌面下修改字体映射的情况并不多见,Tahoma映射SimSun,PMingLiU,也就是在系统对于英文字体使用Tohama显示,而简体中文使用宋体,繁体中文使用明体显示,这是windows的字体映射情况,但在其他系统下,映射规则不是这样,尤其是linux,字体映射可以随时更改相关配置文件,重启X界面就生效,定制性很大,所以考虑到这种情况,如果网站linux用户比较多的话,考虑到多数linux用户使用到的浏览器为Firefox,个人认为在样式规则中还是有必要写入一个中文字体的,可以考虑文泉驿的字体或者宋体.
对于Opera,修改页面显示字体似乎只能修改用户样式来实现.
基本上没有使用过Leopoard,但似乎默认中文字体是华文黑体(STHeiti)和华文细黑(STXihei),既然Leopoard是基于BSD的,所以觉得应该也是可以随意修改字体配置文件的.
Safari的Win版本似乎页面显示的字体显得更复杂一些.
February 13th, 2009 on 19:36
“问题1,在vista的ie下,Arial也有”,试了一下,vista下不论是ie6还是ie7都没有发现Arial有下划线的问题。
February 16th, 2009 on 10:59
上一篇回复错误,vista的ie下,Arial确实有下划线问题,我之前在浏览器中把默认的中文字体设置成了微软雅黑,所以没有发现问题,把浏览器中文字体改成宋体后,不论是Tahoma、Arial还是宋体都会出现下划线紧贴文字的现象,简直是匪夷所思,看样子有必要专门为vista加一个微软雅黑。
February 19th, 2009 on 19:34
学习了,默认宋体+Arial也很错
March 4th, 2009 on 15:19
为啥没有Verdana 呢,这款字体也很耐看
较之Tahoma字体,字母间隔宽稍微大一点点
November 17th, 2009 on 11:41
用Tahoma 字体,网页中用来表示的一些点,箭头符合都必须得用图片了,
而且用宋体的话,英文和中文显示起来错落有致,很好看的,用Tahoma在ie下显示有些虚,而且字体中英文高度都一样,不好看
我认为应该以”宋体”开头,尤其是对于中文网页来说
November 17th, 2009 on 19:51
@jingangel: 这跟个人审美有关,很难评判。不少人觉得宋体的英文很难看,包括我。需要进一步的调研数据才能确定大众更喜欢的字体方案。
leave a reply