关注前端开发
关注用户体验

详解CSS设置默认字体样式

浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级

通常用户看到的页面的样式会受到三层控制:

第一层是浏览器的默认样式
第二层是网页定义样式
第三层是用户自定义样式

CSS一样,后面的优先级 高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。不过,当有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用 户 > 网页 > 浏览器默认。

字体:arial

我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页 上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于糟糕,比如©字符,所以我们一般期望通过CSS来实现用更好的字体 样式来显示它们,然后用宋体来显示中文和中文符号。之所以选择arial是因为:
Windows和Mac都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。

视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体样式是 font: 12px/1 Tahoma, Helvetica, Arial, “\5b8b\4f53”, sans-serif;

这是一个很不错的选择,但是你也会发现GoogleYAHOOYoutube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。

一般情况下设置font-family都会在最后设置通用字体族以保证其安全性,比如Google的设置为font- family:arial,sans-serif;,但是至少在非中文版的Win7下当编码是GBK时,IE8会因sans-serif来渲染宋体,导致 字体出现变形,这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
因为中文字体的选择非常有限,所以 目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。 可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑,这是因为谋智网络擅自修改了用户自定义样式,不允许网页的样式覆盖浏览器设置的样式。 也是由于类似的情况,我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通 过设置行高和hasLayout能解决绝大部分情况,但是都不会很完美,如果把字体改成“宋体”能彻底的解决问题。很明显,这个问题只出现在IE上。所 以,如果你的网站很少使用英文、数字和英文符号,那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小:12px

12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。

不用考虑基于字体大小(em)的设计。

Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。

行高:1.5倍

这是一个经验值,不同的产品对这个值要求可能不同,但我们一般会设置最常用的为默认值。比如YUI的font中是 font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px,行高是 13*1.231=16.003px,默认的行高是默认字体的1.231倍。对于中文来说,常用的字体大小12px、14px、16px、18px等偶数 大小,在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

在IE6和IE7中,行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。

设置line-height时,注意不要使用单位(包括%在内),因为子节点会继承经过运算后的line-height值,所以当使用单位后浏览器会把 line-height计算成第一次定义的绝对值,而不会随着字体大小的变化而变化,而无单位的数值表示是所在容器的font-size的倍数,所以设置 为无单位的数值是最佳选择。

深入CSS 行高非常有利于理解line-height,值得一读。

性能和效率

大部分平台都有arial,减少浏览器的查找时间。

代码最少,书写方便。arial基本上是名字最短的字体了,可以节约CSS的大小。

所有的字母都小写,目前Google就是这样做的,好处是既可以编写更快也能提升Gzip压缩的效率。

中文最好用unicode表示,比如使用宋体是{font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。

使用正确的字体种类写法,避免使用引号,这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

通过对中英文及符号混排的测试, 我发现微软雅黑其实表现相当不错,包括英文数字和英文字符以及在IE6和IE7的显示效果上,但唯一的遗憾是在XP下 如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话,在firefox、Safari和Opera、特别是IE6下会非常模糊难 以辨认。针对这个问题目前并没有很好的 解决方案,所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年,XP死掉的时 候。

虽然很早就有了@font-face,但是浏览器的支持、网速和商业问题,导致它很少被应用。最近关于字体的好消息是 Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体:现状 与未来和再谈 Web 字体的现状与未来。

未经允许不得转载:大前端 » 详解CSS设置默认字体样式
分享到: 更多 (0)

评论 35

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #30

    学习了

    alice3年前 (2015-01-22)回复
  2. #29

    太好了。学习了。尢其是line-heitht,我以前一直指定单位。

    keithorbit6年前 (2011-12-31)回复
  3. #28

    :mrgreen: font-family:\5b8b\4f53;这个是什么写法呀,我不懂,能不能解释下

    我是万恶的UEDer6年前 (2011-12-07)回复
  4. #27

    博主的很多文章非常好,已加入收藏夹,经常来哈

    新蓝网络7年前 (2011-01-13)回复
  5. #26

    这是一篇相当不错的文章,感谢!

    ugg classic Boots7年前 (2010-11-20)回复
  6. #25

    @all:感谢各位对大前端的支持和厚爱,之前有事儿忙,今后会有更多更好的资源技巧和大家分享,有好文章的朋友也可联系k2(k2work@qq.com),谢谢大家!!!!

    k27年前 (2010-11-05)回复
  7. #24

    支持,博主继续。。。。

    懒人沙发7年前 (2010-11-01)回复
  8. #23

    不错的文章!
    网页设计时很重要的基础文章

    web前端寒风7年前 (2010-10-31)回复
  9. #22

    呃,老七,我突然发现,你的留言好长啊

    信誉导购7年前 (2010-10-29)回复
  10. #21

    有点道理

    匿名7年前 (2010-10-25)回复
  11. #20

    博主继续写啊

    藤原7年前 (2010-10-25)回复
  12. #19

    有博客真好,支持了!

    cpa广告联盟7年前 (2010-10-19)回复
  13. #18

    lolibao.com 支持你的博客!我也开博客啦……互踩

    lolibao.com7年前 (2010-10-17)回复
  14. #17

    http://www.zloli.com 支持你的博客!我也开博客啦……互踩

    zloli.com7年前 (2010-10-16)回复
    • 谢啦啊!

      k27年前 (2010-10-16)回复
  15. #16

    还不错

    贡米7年前 (2010-10-14)回复
  16. #15

    这是一篇相当不错的文章,感谢!但是{font-family:\5b8b\4f53;}我在本地可以运行,在服务器上就不能运行,这是为什么呢?

    山里娃7年前 (2010-10-13)回复
    • 是不是你的电脑里、没有那个字体啊

      k27年前 (2010-10-16)回复
      • 应该是。

        guo5年前 (2013-01-21)回复
  17. #14

    这是一篇相当不错的文章,感谢!

    山里娃7年前 (2010-10-13)回复
  18. #13

    创造第一高楼

    hzliqiu7年前 (2010-10-12)回复
  19. #12

    不错,虽然每天都在用这个css默认字体,但是还没有这么深入详细的了解,谢谢博主分享。

    宁波网站设计7年前 (2010-10-12)回复
  20. #11

    预祝博主国庆快乐,合家美满!

    神仙传7年前 (2010-10-12)回复
    • 过期了。

      k27年前 (2010-10-16)回复
  21. #10

    感谢楼主分享的好文章!!!

    许昌房产网7年前 (2010-10-09)回复
  22. #9

    博主的博客不错啊。网赚博客(www.beiren.info)想和博主做个友情链接,可以的话,加806768613

    网赚博客7年前 (2010-10-08)回复
  23. #8

    就老七和jclyn灌水问题

    正品淘7年前 (2010-10-02)回复
  24. #7

    藤原纪香博主你喜欢吗

    藤原纪香7年前 (2010-10-01)回复
  25. #6

    用chrome可以看出在哪里修改,我本来不会修改的,还是改了几处地方

    广州SEO7年前 (2010-09-30)回复
  26. #5

    感谢楼主分享的好文章!!!

    安全减肥7年前 (2010-09-29)回复
  27. #4

    你的站不错。十分不错!支持

    11sss7年前 (2010-09-28)回复
  28. #3

    关注天下关注博文

    晋州爆炸7年前 (2010-09-21)回复
  29. #2

    @盘锦红海滩:感谢您的支持@!

    k27年前 (2010-09-16)回复
  30. #1

    每天来顶贴已经成了我的习惯,多谢经常的好文,加油!

    盘锦红海滩7年前 (2010-09-16)回复

themebetter 国内更好的WordPress主题服务商

立即前往