5. 文本排版

5.1 字体族

【强制】 font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中；

常见的字体族名称如下：

字体 操作系统 Family Name
宋体 (中易宋体) Windows SimSun
黑体 (中易黑体) Windows SimHei
微软雅黑 Windows Microsoft YaHei
微软正黑 Windows Microsoft JhengHei
华文黑体 Mac/iOS STHeiti
冬青黑体 Mac/iOS Hiragino Sans GB
文泉驿正黑 Linux WenQuanYi Zen Hei
文泉驿微米黑 Linux WenQuanYi Micro Hei

【强制】 font-family 应当遵循以下顺序：

  1. 西文字体在前，中文字体在后；
  2. 效果佳 (质量高/更能满足需求) 的字体在前，效果一般的字体在后的顺序编写；
  3. 最后必须指定一个通用字体族( serif / sans-serif )；

详细说明可参考 如何保证网页的字体在各平台都尽量显示为最高质量的黑体？

【强制】 font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一；

示例：

  1. /* Not so great */
  2. body {
  3.     font-family: arial, sans-serif;
  4. }
  6. h1 {
  7.     font-family: Arial, "Microsoft YaHei", sans-serif;
  8. }
  10. /* Better */
  11. body {
  12.     font-family: Arial, sans-serif;
  13. }
  15. h1 {
  16.     font-family: Arial, "Microsoft YaHei", sans-serif;
  17. }

5.2 字重

【强制】 font-weight 属性必须使用数值方式描述；

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 >700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

示例：

  1. /* Not so great */
  2. .selector {
  3.     font-weight: bold;
  4. }
  6. /* Better */
  7. .selector {
  8.     font-weight: 700;
  9. }

[⬆]