这是昨天技术分享上讲的一个话题，字体的一些基本知识和 CSS 中字体相关的部分。把 slides 分享出来，用 reveal.js 做的，这东西挺绚但是内容要写 HTML。直接修改了下 main.css 适应自己讲的内容，其实也是可以分开改按插件加进去的，因为懒我就直接改了...
http://lync.in/slides/font/slides.html
http://justineo.github.com/slideshows/font/ (移至 GitHub Pages)
友情提示一下：上下左右可导航，左右控制顶级导航，上下控制次级导航，按 space 看切换到 overview 视图。
用 Chrome (Firefox 也可不过可能没那么流畅) 打开观看即可，有问题或者建议请直接在评论里反馈吧。
在这里感谢下查阅资料的时候热心为我解惑的知乎网友 @李任之 (Belleve Invis)、@梁海、@厉向晨 (Digidea)。有相关问题也可以联系他们。
更多联系方式：
Belleve Invis | 梁海 | Digidea
3 位都很年轻，后生可畏啊。
18:17, 2012-04-20梁海 /
哇，这 reveal.js 果真挺漂亮！
把「character」和「语素」等同起来似乎不恰当。
「书体」和「字体」的关系比较乱，二者似乎通常不在同一套术语里使用。
那个非主流的「font-family: Helvetica, serif;」，呃，是为了引发后面的讨论吗？
Mac OS X 下 Firefox 11 的那个测试，「有 generic family 时，与 Safari 相同 (serif 和 sans-serif 字体均含汉字)」这句话似乎说反了？
哈哈那个「鉴赏」好损……
这份 slides 做得真好。:D
18:36, 2012-04-20Justice /
@梁海
嗯，「语素」那个的确不太恰当，给提个意见这里写点啥好呢？
「书体」那个的确不是同一套术语里所以没把他单独作为一个标题，只是提一下我们通常说的「宋体」和作为书体的「宋体」有所区别。
Helvetica + serif 就是为了看看在极端情况下，fallback 策略会作何种考量。
Mac Firefox 那个，可能说的不妥，原意应该是「不会按首字体来 fallback」这点上和 Safari 相同，我去修改一下。
19:29, 2012-04-20大眼夹 /
非常棒的资料，非常炫的slide，我在iPad上看的，效果非常好（就是第一遍忽略了好多可以向下翻的。。）
22:52, 2012-04-20梁海 /
@顾轶灵：
大陆一般把「character」译为「字符」，而港台多用「字元」。「Character」是文本编码、字体等领域的概念，独立于语言，和语言学的「语素」也无关系。（比如「b」是个字符，但不是语素。而「a」在英语里是个语素，但在别的语言里并不一定是。）
「原意应该是『不会按首字体来 fallback』这点上和 Safari 相同」——其实不是的，这里你可能被浏览器绕晕了……
实际上，WebKit 浏览器（Safari、Chrome）总是会依据 font-family 列表的第一个字体来为汉字选取 fallback 字体。比如 font-family: Georgia, sans-serif; 会导致中文是华文宋体，而 font-family: "Helvetica Neue", serif; 会让中文是华文黑体。
而 Firefox 这种 Gecko 浏览器就不会有这个问题，它的行为更符合 CSS 规范。
另外，把这个 slides 的 html, body 的 font-family 里的 STHeiti 改成 "Hiragino Sans GB" 吧，那样在 OS X 上的效果会非常好。
一般的 CSS 里其实都没有必要写 STHeiti（除非像上面说的那样，font-family 列表开头的西文字体类别和你想要的中文字体类别不同），因为 STHeiti 是默认的中文 sans-serif 字体，系统会自动把中文 fallback 过去的，不必像为 IE 写 SimSun 那样为 OS X 写 STHeiti。
然后 "Hiragino Sans GB" 是目前最优秀的中文黑体，不写到 font-family 里实在可惜了。:P
02:04, 2012-04-21Justice /
@梁海
的确晕了...前面回复的好像和 slides 里也完全不是一个意思，大概急着下班语无伦次了。
重新整理下，感觉你说的也不完全对。首先，在所有 font-family 都没匹配时，WebKit 总是按首字体做 system fallback，这点应该是对的。但是你看这个图，
font-family: Helvetica, serif;在 Safari 下汉字是华文黑体，而同样情况 Chrome 下则是华文宋体。两个同事的 Macbook 下都是这样的，我没有不好测，你可以看看你那是不是这样的 (地址)。所以我分析应该下面这样：
- Safari 默认字体是西文字体，所以处理 serif / sans-serif 时遇到汉字会需要按首字体做 system fallback；
- Chrome 默认 serif / sans-serif 就是中文字体所以不会遇到 system fallback 的情况，拿默认的就行，如果默认字体不带中文那就应该和 Safari 一样；
- Firefox 应该是按配置来的，简体中文的 serif / sans-serif 应该已经定义好了，也不需要按首字体来找。
哪个更按照规范貌似倒是没什么依据，规范里只说了 system font fallback，但是也没说怎么个 fallback。
STHeiti 已经换掉了
PS. 回复按「Reply」就好，会有链接的。
19:49, 2012-04-21梁海 /
@Justice
测试了一下，我明白是怎么回事了。
上一条评论里我说的那个 WebKit 规则没有错，但是 Chrome 在 WebKit 的规则之前又加了一套规则，就是 Chrome 的偏好设置里各类别的默认字体配置。Chrome 在简中 locale 里会把 serif 和 sans-serif 的默认字体设为华文宋体和华文黑体。
于是，当遇到 font-family: Helvetica, serif; 的中西文混排页面时：Chrome 用 Helvetica 显示所有西文；然后发现 Helvetica 无法显示中文，就根据 generic-family 这个 serif 来查看自己的默认字体配置，在简中 locale 时会查到「华文宋体」，于是就用华文宋体了。
因为 Chrome 的这个默认字体配置在 en.wikipedia.org 这种只写 font-family: sans-serif; 的页面上会导致西文全用华文黑体显示，无法忍，所以我把 Chrome 的这一套默认设置改成了 serif 用 Georgia，sans-serif 用 Helvetica Neue。于是我的 Chrome 遇到 font-family: Helvetica, serif; 时，发现 serif 默认的 Georgia 还是无法显示中文，就 fallback 到 WebKit 的规则了——根据 font-family 列表开头的 Helvetica 来选择操作系统默认的与 Helvetica 同一类型的中文字体。
而 Safari 就没有 Chrome 这一套完整的默认字体配置，只有默认字体（CSS 未写明 generic-family 时使用）和 monospace 默认字体。不过 Safari 和 Chrome 都是经由 WebKit 最终 fallback 到操作系统的字体配置（至少在 Mac OS X 上是这样）。
而 Gecko 用独立于操作系统的自己那一套。
19:51, 2012-04-21梁海 /
@Justice
噢，我写了一堆才发现我和你说的是一样的……
20:25, 2012-04-21Justice /
@梁海
恩，应该都能说通了。我之前稍微扫了一下 WebKit 的相关源码，是有为各个 generic family 设定字体的接口的。Chrome 那套配置应该就是调了那些接口；Safari 可能是考虑到多数用户也不用知道得那么详细，所以只暴露了两个接口，这个和产品设计理念有关吧。
11:06, 2012-05-12花满楼 /
justic 你好，我是用simple dark主题的用户，真心喜欢你这款主题。但是最近我遇到了一个麻烦，不知道您是否能帮我解决一下。我这边边栏除了一个钟表能显示出来，其他都显示不很粗来了。换了主题好像也是这样。请问怎么解决呢？谢谢了！·
11:26, 2012-05-14所谓刚子 /
这个作为毕业设计的PPT答辩很不错啊。。哈哈哈哈
11:09, 2012-06-17元之声 /
杯具啊！打不开呢？