字体漫谈

现实 (悲惨世界)

Win 7
IE 8 +

• UTF-8 页面，默认 serif 字体会错误地优先使用朝鲜文字体「Batang」；
• GBK 页面除了前面这个问题外，默认 sans-serif 还会优先使用朝鲜文字体「Gulim」；
• <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 可缓解
• Win 7 下其他浏览器的 serif / sans-serif 汉字默认最终都会落到到「宋体」。

OS X
Safari 5

• 默认 serif 为「Times」，汉字会使用「华文宋体」(STSong)；
• 默认 sans-serif 为「Helvetica」，汉字会 使用「华文黑体」(STHeiti)。
• 所有 family 都缺字时 WebKit 中汉字按首字体来选择 system fallback 字体：

  p.foo { font-family: Helvetica, Times; }
  p.bar { font-family: Helvetica, serif; }

  其中的汉字均会 fallback 为「华文黑体」。

OS X
Chrome 18

• 默认 serif 为「华文宋体」；默认 sans-serif 为「华文黑体」。
• 没有 generic family 时，与 Safari 相同即按首字体 fallback。
• 有 generic family 时，因为默认 serif 和 sans-serif 都包含汉字，故不需要再按首字体来 fallback：

  p { font-family: Helvetica, serif; }

  其中的汉字字体会根据 serif 选择为「华文宋体」。

OS X
Firefox 11

• 默认 serif 为「华文宋体」；默认 sans-serif 为「华文黑体」；
• 没有 generic family 时，汉字总是通过 system fallback 选择「华文黑体」；
• 有 generic family 时，按配置项选择对应字体 (默认配置中 serif 和 sans-serif 字体均含汉字)
  

  p.alpha { font-family: Times, Helvetica; }
  p.beta { font-family: Helvetica, Times; }
  p.gamma { font-family: Helvetica, serif; }

  其中前两条的汉字字体都会 fallback 为「华文黑体」，第三条为默认 serif「华文宋体」。

OS X 下这几个浏览器具体表现可参考此图

More…

• Opera (Presto) 对包含 localized family 的字体无法识别英文名字如「SimSun」
• Opera (Presto) 在 Windows 下无视 FontSubstitutes
• OS X 下的 WebKit 不识别 localized family 如「宋体」
• …

没有银弹

建议

• 尽量使用 UTF-8 编码并指定 lang 为 zh-CN
• 尽量指定 generic family
• 默认 font-family 推荐「Arial, sans-serif;」
  在 Windows 下，sans-serif 会默认采用「宋体」；OS X 下的「华文黑体」本就是通用选择。「Arial」换为「Tahoma」、「Verdana」等均可，可视设计而定。(可能引起文本对齐问题)
  实在需要使用 GB2312/GBK 时，推荐去掉「sans-serif」，否则 Win 7 IE8+ 会错误使用「Gulim」。(亦可为 IE 写单独的 font-family)
• 对 family name 中的汉字进行 Unicode 编码一般情况下没有必要

建议

• 尽量显式声明，避免让浏览器/操作系统选择字体
  西文字体在中文前、将平台独有的字体在通用字体前、generic family 列最后。

  "Lucida Grande", Verdana, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

• 特殊 family name 两边加引号
  包含空格符、数字、除 "-" 外的特殊字符时建议加，但非必须。
• family name 名称统一
  大小写建议统一，也尽量避免「宋体」、「SimSun」混用，有利于 gzip。
• 中文 font-size 至少 12px (SimSun < 12px 时难以辨识)

鉴赏

鉴赏

鉴赏

鉴赏

What's next?

font-family

• 明确了「family name 只能匹配一组字体，而非指定某个特定字体」
• 明确了「必须可以通过本地化名称匹配字体」
• 附录中描述了对于 OpenType 和 TrueType 可以用作 font-family 匹配的字体名称：Family (ID 1), Preferred Family (ID 16), WWS Family (ID 21)
• 尚不完整

font-weight

增加了一个字重数值-样式名的对照表供参考：

• 100 - Thin
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Normal
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

font-stretch

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

用来选择字体的伸缩程度

font-size-adjust

<number> | none | inherit

aspect value：字体的 x-height 与 font-size 的比例

字体发生 fallback 以后，aspect value 可能会不一致，这个属性用来调整 font-size 使得不同字体的 x-height 保持一致，取值为需要的 aspect value 值。效果参见示意图。

font-synthesis

none | [ weight || style ]
默认 weight style

• 显式地控制是否允许浏览器拟合字重和样式

@font-face

@font-face {
    descriptor: value;
    descriptor: value;
    …
}

descriptor 与 CSS 属性不同，用来「描述」Web font 而非「选择」。

@font-face

• font-family
• src
• font-style
• font-weight
• font-stretch
• unicode-range
• font-variant ^*
• font-feature-settings ^*

* 这里添加的规则将影响字体的渲染结果，但不影响字体选择。

src

是一系列字体资源的列表，优先使用 UA 能够使用的第一个资源，每个资源项后的文件类型描述可选。

src: url(fonts/simple.ttf);
src: url(basic.woff) format("woff"),
     url(fonts/basic.ttf) format("opentype");

src

读取本地字体

src: local(Baidu), // try local font first
     url(baidu.ttf) format("opentype");

unicode-range

@font-face {
    font-family: BBCBengali;
    src: url(fonts/BBCBengali.ttf) format("opentype");
    unicode-range: U+00-FF, U+980-9FF;
}

@font-face

已被主流浏览器支持

IE 9 以前仅支持 EOT 字体，浏览器兼容性可参考这里。

中文环境下的应用场景？

font features

更好地利用字体的的原生功能，提供更丰富的样式

font-variant-position

font-variant-position

font-variant-caps

font-variant-numeric

更多请参考 Font feature properties

Normalize-OpenType.css

字体匹配算法

• 增加了最先进行 font-stretch 匹配
• font-style 匹配过程补完
• small-caps 不再放在字体匹配过程中处理，而加入到 font features
• Unicode variation selector 匹配成为必须