关于页面字体

关于 Web 页面字体这方面,我是门外汉,弄不出来长篇大论 — 这样也没必要,从观察统计上简单分析一下看看就够了。

几个页面字体适配度比较好的,HTML body 字体的定义:

  • Google: font-family: arial,sans-serif;
  • Twitter:font: 13px/1.5 Helvetica Neue,Arial,Helvetica,’Liberation Sans’,FreeSans,sans-serif
  • 豆瓣:font: 12px/162% Arial,Helvetica,sans-serif;
  • 新浪微博:font-family: Arial,Helvetica,sans-serif;
  • Apple中国:font: 12px/18px “Lucida Grande”,”Lucida Sans Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • 知乎: font: 13px/22px ‘Helvetica Neue’,Helvetica,Arial,Sans-serif;
  • Facebook: font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
  • Google+: font: 13px arial,sans-serif;

结论:Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 可选:Helvetica Neue . 知乎的定义几乎可以直接照用.

其它:

  • 微软中国: font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
  • 淘宝:font: 12px/1.5 tahoma,arial,宋体; //看过淘宝同学写过的很棒的字体文章,估计页面不是统一定义的.
  • 百度:font: 12px arial;
  • QQ: font-family: “宋体”,”Arial Narrow”;
  • 新浪:font-family: “SimSun”,”Arial Narrow”; //最烂

结论:用了宋体的,都比较烂 … 中文网站要想页面视觉稍微好一点,直接去掉 CSS 中的宋体.

EOF

Updated: 对于个人站点,字体可以尽情发挥。

Updated 2: 新浪的同学解释说,之所以用宋体,是因为”宋体的半角字符是等宽字体(1/2个全角),长度的标题不会因出现英文或数字而折行”。估计是历史原因吧,相信这个问题总是有解的,看怎么解决罢了。

此文作者:, 位于 Web 分类 标签: on .
转载须以超链接形式标明文章原始出处和作者信息及版权声明.

15 thoughts on “关于页面字体

  1. tinytian

    微软一直是Web和自己操作系统字体匹配,Windows 2000/XP时代是Tahoma和Verdana,Windows Vista和Windows 7时代是Segoe系列,至于更早,我就弄不清了。

    Reply
  2. Allen

    大辉应该还考虑一下 serif和san-serif字体的差别。做一下对比
    不过介于Windows堆serif字体渲染比较差。。。。Georgia 字体就被中文网站忽略了

    Reply
  3. JessonChan

    /*
    * NetEase Javascript Library v1.2.5
    *
    * Modified from
    * jRaiser Javascript Library
    * http://code.google.com/p/jraiser/
    * Copyright 2008-2010 Heero.Luo (http://heeroluo.net/)
    *
    * licensed under MIT license
    *
    * Creation date: 2008/2/6
    * Modified date: 2010/8/4
    */
    看看网易多聪明呀!我也一直觉得在中国可以称上老大也就这一家了。对开源的支持也是没有说话了,更新快、速度快,我用的ubuntu,一直用163的源。

    Reply
  4. sunzheng.david

    中文字体都比较麻烦。问题有二
    第一,中国很少有设计师会静下心来设计字体
    第二,中文字也实在太多了
    因此,各个网站的解决方案会比较雷同。

    Reply
  5. 新浪CSS的书写者

    每种写法都是其自身需求的,没有最好,只有最适合,至少新浪首页是这样做的。
    新浪首页使用宋体是因为新闻标题不能折行,只有宋体的半角字符是等宽字体(1/2个全角),目的是同长度的标题不会因出现英文或数字而折行,而Arial Narrow是在Mac下最接近宋体半角的,这是经验我们测试的。但这种写法还是有一个小问题,能发现吗?
    大家多用Arial是因为大家觉得它好看点,其实中文网页设置什么字体基本没有意义,因为我们看到的大多数文字是汉字,而所说的Arial、Tahoma之类都是英文字体,对汉字不起作用的。以目前的网速汉字是不太可能使用CSS嵌入字体的,也就意味着你只能使用用户系统中存在的字体,那基本就只有宋体、黑体了。所以目前不要为字体支纠结,除非你有特殊需求。
    PS:前段时间方正来我们公司推广过动态生成小字库,但也不太实用,有兴趣的可以找方正了解一下。

    Reply
  6. 吴善

    原来是为了西文部分的等宽啊,我说怎么中文门户网站都不约而同地采用了宋体呢。中文字体真蛋疼。

    Reply
  7. 61

    如果网站用的字体在用户机器上没有的话,会非常悲剧。
    中文的字体文件又死大的。首先为了多浏览器支持,需要准备各种格式的字体文件,然后这些字体动不动就30-40m,产品环境压缩后也有10多m。如果不做优化的话,单单下载字体就能让很多浏览器页面不渲染,一直下载字体文件。中国的网速你懂的,搞不好30秒一个页面还没显示出来。
    小字体库也不给力,中文字体文件的大小还是太大。如果一些用到很少字的地方需要使用特殊字体的话(比如菜单,非图片和flash的广告标语),最快而且兼容绝大多数主流浏览器的方法是把每个用到的字做成base64写入css之中,下载速度是飞快了,维护起来绝对是死,只能写自动化干这活。
    对于要用特殊字体的网站,真的是伤不起啊。

    Reply
  8. Sivan

    中文的话还是别搞些花哨字体了⋯⋯font-face之类就适合英文字体。
    前一段好像是csstrick写的吧,提到font-family只要一个sans-serif就行了。Mac会自动换Helvetica,Win会用arial。

    Reply
  9. Nower

    “结论:用了宋体的,都比较烂 … 中文网站要想页面视觉稍微好一点,直接去掉 CSS 中的宋体.”
    为什么?为了让外国人看我们的中文门户网页舒服点吗?

    Reply
  10. insraq

    CSS永远没法找到完美的解决方案,以下的几个Bug:
    1. 英文Windows操作系统下,IE8如果最后不指定宋体的话,会很难看。
    2. 只写Sans-seif,在Firefox下面某编码默认的是宋体,会用宋体的中文部分显示,非常难看。
    3. 以上的写法,淘宝的最安全。

    Reply
  11. 兔子

    现在mac也自带arial了,所以Google的写法是最简单和通用的。即使不带arialmac也会自动用helvetica,写不写都无所谓。

    Reply
  12. tucao

    用xp的ie6看看所谓的微软雅黑吧~也烂到掉渣!在中国你就必须要苦逼地支持ie!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *