CSS | 字体系列

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;

技巧：

1.标示加粗字体的方法很多，例如，名为Zurich的字体系列有很多变形，如Zurich Bold、Zurich Black、 Zurich Light 和Zurich Regular，这些变形都使用相同的基本字体，但是每个变形都有不同的加粗。
如果你希望一个文档

h1 { font-family: 'Zurich Bold', sans-serif; }

h2 { font-family: 'Zurich Black', sans-serif; }

h3, p { font-family: Zurich, sans-serif; }

只有当所有人都安装了这些字体时，样式表才能起作用，但更可能的情况是，大多数人都没有安装所有这些字体。更有意义的做法是为整个文档指定一个字体系列，然后为不同元素指定不同的加粗。

加粗如何起作用

字体指定了9级：100~900

由于每个人的审美不一样，钟爱的字体也会有所有不同，这里给出我个人的常用写法：

font-family: "HelveticaNeue",Helvetica,Arial, "PingFangSC", "HiraginoSansGB", "HeitiSC", "MicrosoftYaHei", "WenQuanYiMicroHei",sans-serif;

以及

font-family:"Open Sans", Arial, sans-serif;

另外推荐两个github上的关于中文字体和排版的项目：

Fonts.css -- 跨平台中文字体解决方案

typo.css -- 中文网页重设与排版：一致化浏览器排版效果

参考资料

《CSS权威指南（第三版）》
中文字体网页开发指南
 了解web中的字体之初体验
 在Web内容中使用系统字体

网页字体Serif和Sans-serif的区别及浏览器字体的设置
 CSS Font知识整理总结

作者：瓦斯程序媛
链接：https://www.jianshu.com/p/73c2e93feb68