CSS font关键字属性值的简单研究
这篇讲的是CSS `font`属性中一个容易被忽略但很实用的特性——关键字属性值。我们平时用`font`多半是做缩写，比如`font: 14px simsun;`，但作者从这里出发，引出了另一种完全不同的用法：直接使用`caption`、`menu`、`status-bar`等系统关键字。 这两种方式有着根本区别。缩写至少要指定`font-size`和`font-family`，而关键字是独立的单一值，它直接映射到操作系统部件（如按钮、菜单、状态栏）所使用的字体。作者通过在Windows 7和iOS上对Chrome、Firefox、IE等浏览器的实测发现，虽然所有现代浏览器都支持规范内的这些关键字，但不同关键字在不同系统和浏览器中映射到的字体和字号存在明显差异。例如，同一个`caption`关键字，在Windows Chrome下可能是16px的微软雅黑，在iOS Safari下则可能是13px的另一种字体。文章也指出了非标准关键字（如`-moz-button`）兼容性较差，实际应用价值不大。 那么，这个特性有什么用？作者发现它最大的价值在于优雅地实现跨平台字体自适应。比如，我们希望在Windows下使用微软雅黑，而在iOS下使用系统默认的、更好看的字体，以前可能需要写浏览器判断或CSS hack。现在，只需在`body`上设置`font: menu;`或`font: status-bar;`，再补上统一的`font-size`即可。这样就让每个系统自动调用其最匹配的界面字体，代码简洁且兼容性有保障。
