中文网页字体用例

传统类

  1. 动点科技
    font-family: "Helvetica Neue", Arial, Hiragino "Sans GB", "Microsoft Yahei", "微软雅黑", "Sans Serif";
  2. 凹凸实验室
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  3. Teambition
    font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Segoe UI" , "Helvetica Neue", "PingFang SC", "Noto Sans" , "Noto Sans CJK SC" , "Microsoft YaHei" , "微软雅黑" , sans-serif;
  4. iVuew
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  5. 淘宝 / taobao.com
    font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
  6. 知乎 / zhihu.com
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;
  7. 豆瓣 / douban.com
    font-family: Helvetica, Arial, sans-serif;
  8. Vice.cn
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", Roboto, "Microsoft YaHei", sans-serif;

    特色类

  9. 平面设计师何庭案(台湾)博客部分字体
    font-family: garamond, 'cwTeXMing', serif;

中文网页字体常见策略

1. 黑体

font-family: -apple-system, system-ui, BlinkMacSystemFont, 
             "Helvetica Neue", Helvetica, 
             "PingFang SC", "苹方", "Hiragino Sans GB", "冬青黑体",
             "Microsoft YaHei", "微软雅黑",
             STHeiti, "华文黑体",
             Arial, sans-serif,
             "SimHei", "黑体",
             ;

上面遵循了这些原则:

  1. 注意:很遗憾,我无法提供支撑下面诸假设的实验数据。
  2.  优先选用系统默认的中文字体,因为:
    • 主流系统厂家都很重视字体,默认的字体往往在终端浏览器上显示效果很好
    • 与英文字体不同,由于目前技术的限制(中文字体文件太大),一般情况下,用户为了看到网页,我们要求他/她去下载一个几MB甚至十几MB大小的字体,这样的做法不切实际
  3. 优先设定苹果设备的字体,因为:
    • 由于微软Office for Mac在中国的流行,很多MacOS上有“微软雅黑”等微软的中文字体。在Mac电脑上安装Windows系统的用户在国内也不在少数。如果先规定微软系统的字体,我们将违背“优先选用系统默认的中文字体”的原则
  4. 优先设定英文字体
    • 一般英文字体不包含中文字体(看字体大小就知道了),而很多中文字体包含英文字体。但是中文字体中的英文字体效果参差不齐。一般浏览器看来,先规定的字体权重最大。因此,先写英文字体再写中文字体往往能让我们得到理想的中英文字体显示效果
  5.  字体家族选用黑体,因为:
    • 黑体的易读性(legibility)好,有利于信息的传播。尤其是在今天这个手机阅读的时代
    • 反感黑体的用户比较少;
    • 微软与苹果两大厂家给我们提供了优秀的黑体
  6. 中文字体先写英文然后写中文,是为了:
    • 标注而已,分行同理
  7. 最后的STHeiti,Arial,sans-serif以及SimHei(中易黑体,“黑体”就是它)是备选方案
    • SimHei在Windows XP就有,雅黑是Windows 7才有的。SimHei英文太丑,放到最后。而STHeiti等于是MacOS的SimHei
    • 抱歉,不特别照顾Linux内核桌面系统(Ubuntu以及Fedora等)的用户

2. 不设置

3. 不思考,用别人的方案

中文字体没有多少可玩的空间,大家的方案都差不多,例如这些

4. 别人决定

UI团队决定,UED团队决定,CTO,老板决定,反正不是前端决定。