CSS字体处理中最复杂的部分是字体系列（font-family）匹配和字体加粗(font-weight)匹配，其次是字体大小(font-size)的计算。
一、 字体系列
相同的字体可能有很多不同的称呼。例如，你可能对字体Times很熟悉，不过，Times实际上是多种变形的一个组合，包括TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldOblique等等。Times的每种变形都是一个具体的字体风格，而我们通常认为Times是所有这些变形的一个组合。换句话说，Times实际上是一个字体系列（font family），而不只是单个的字体，尽管我们大多数人都认为字体就是某一种字体。
除了各种字体系列外（如Times、Verdana、Helvetica或Arial），CSS还定义了5种通用字体系列。
Serif字体
这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的。例如，小写的i和小写的m的宽度就不同。上下短线是每个字符笔划末端的装饰。如下图所示：
Serif.png
Sans-serif字体
这些字体是成比例的，而且没有上线短线。sans-serif字体的例子包括Helvetica、Geneva、Arial和Univers。
image.png
Monospace字体
Monospace字体不是成比例的，每个字符的宽度都完全相同，所以小写的i与小写的m有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为monospace字体，而不论是否有上下短线。monospace字体的例子包括Courier、Courier New和Andale Mono。
Fantasy字体
这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其划归为任何一种其他的字体系列当中。这样的字体包括Western、Woodblock和Klingon。
二、几种常见都中文字体
宋体
宋体是最常见都中文字体，如果没有指定字体，操作系统往往选择它来渲染。
微软雅黑
微软雅黑的美观度和清晰度都较好，可以作为网页都首选字体。它在Mac平台对应字体是华文细黑（STXihei）。
但是，Windows XP没有预装这种字体，这时可以选择黑体替代。不过黑体比较粗，不应用于字号较小都文字。
仿宋
这种字体是衬线体，比宋体都装饰性更强。如果字号太小，会影响清晰度，所以只有在字号大于14px的情况下，才可以考虑这种字体。
它在Mac平台的对应的字体是“华文仿宋(STFangsong)”。
楷体
楷体也是衬线体，装饰性与仿宋体接近，但宽度更大，笔划更清楚一些。这种字体也应该在大于14px的情况下使用。
它在Mac平台的对应字体是“华文楷体(STKaiti)”
三、 字体的使用规则
使用通用字体系列
如果你希望文档使用一种sans-serif字体，但是并不关心是哪一种具体字体，以下就是一个合适的声明
body { font-family: sans-serif; }
指定字体系列
建议在所有font-family规则中都提供一个通用字体系列。这样在用户代理无法提供与规则匹配都特定字体时，就可以选择一个候选字体。这种候补策略很有帮助，因为在一个跨平台环境中，将无法知道谁安装了什么字体。
h1 { font-family: Georgia, serif; }
由于中文字体一般都包含英文字母，中文字体中所包含的英文字母会代替指定的英文字体，所以应优先指定英文字体，然后再指定中文字体，因为一般来说中文字体的英文字母不太优美。
image.png
为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family
使用引号
只有当一个字体名中有一个或多个空格（如New York），或者如果字体名称包括#或$之类当符号，才需要在font-family声明中加引号。
如果没有引号，尽管规则当余下部分还会得到处理，但用户代理有可能忽略这个特定但字体名。
p { font-family: 'New Century Schoolbook', Times, serif; }
如果将一个通用名用引号引起，用户代理就会认为你需要的是一个与此同名的特定字体，而不是一个通用字体系列
四、大型网站上的字体实践
知乎选择的字体
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif
谷歌香港
font-family: arial,sans-serif
苹果官方网站（中国）
font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
参考资料
《CSS权威指南（第三版）》
中文字体网页开发指南
了解web中的字体之初体验
在Web内容中使用系统字体
image.png
网友评论