了解web中的字体之初体验
做web开发，就不能不了解web中的字体，今天我们一起来研究一下web中的字体^ - ^。
虽然在不同的操作系统中，系统默认安装的是不同的字体。但是css中还是定义了5种通用字体系列，期望帮助代理理清楚当前web字体混乱的状况。
- 字体的分类
- Serif字体（衬线体）
指的是笔画的末端带有衬线的字体，例如“宋体”，“仿宋体”，“楷体”。这类字体，开始和结 束的地方有装饰，适合印刷字体，也可以用作文章的标题如图。
- Sans-Serif字体（无线衬体）
这些字体是没有上下短线的，更适合在web中显示。例如“微软雅黑”，“黑体”，都是无线衬 字体。 - Monospace字体（等宽字体）
Serif和Sans-Serif字体都是成比例的，Monospace字体不是成比例的，每个字宽度都是 一致的。但中文不存在这样的情况，所以等宽字体应该是针对英文来说的。例如Courier. - Cursive字体（草书字体）
这些字体试图模仿人的手写体，例如Zapf Chancery。 - Fantasy字体
这类字体没有明确特征，无法归入上诉四种系列的字体归入这类字体。
虽然在css中这五个分类最开始针对的是西文，但是我们依然可以根据这些特征来描述中文的类别。还是有必要掌握～
我们在实现应用时，总期望在不同平台上字体显示一致，但是在不同平台上，操作系统预装的字体却不相同。现在我们来了解一下，在Windows系统和Mac os系统中的预装字体^ _ ^。
- 操作系统预装字体
- Windows操作系统
黑体：SimHei 宋体：SimSun 新宋体：NSimSun 仿宋：FangSong 楷体：KaiTi 仿宋GB2312：FangSongGB2312 楷体GB2312：KaiTiGB2312 微软雅黑：Microsoft YaHei （Windows 7开始提供）附上Win7系统上安装的字体（中文简体部分）：
宋体 仿宋 黑体 楷体 微软雅黑 新宋体 幼圆 - OS X操作系统
冬青黑体: Hiragino Sans GB （SNOW LEOPARD开始提供）
华文细黑：STHeiti Light （又名STXihei）
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
- 附上我的系统macOS10.12字体库（中文简体部分）：
报隶 冬青黑体简体中文 黑体 华文仿宋 华文黑体 华文楷体 华文宋体 楷体 兰亭黑 隶变 凌慧体 苹方 手札体 宋体 娃娃体 魏碑 行楷 雅痞 圆体
我们知道css中的font-family属性可以指定多个字体，浏览器会优先执行排在前面的字体，如果找不到该种字体，会依次向后使用下一个字体。如果所列出的字体都无法使用，则由操作系统决定使用哪种字体。宋体是最常见的中文字体，如果没有指定字体，或者没有找到指定字体，操作系统往往选择它来渲染。
由于中文字体一般都包含英文字母，中文字体中所包含的英文字母会代替指定的英文字体，所以应优先指定英文字体，因为一般来说中文字体的英文字母不太优美，如图。
- 如果要在web中使用系统字体，则可以写成这样：
body { font-family: /* 1 */ system, -apple-system, BlinkMacSystemFont, /* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", /* 3 */ "Helvetica Neue", sans-serif;}第一组映射系统 UI 字体：
-apple-system：面向macOS 和 iOS 平台的 Safari，指向 San Francisco，更老版本的 macOS 指向 Neue Helvetica 和 Lucida Grande（中文字体待验证）
BlinkMacSystemFont：为 macOS Chrome 应用系统字体，与上面等同
第二组定义已知的系统 UI 字体：
Segoe UI 面向 Windows 和 Windows Phone
Roboto 面向Android 及 较新的 Chrome OS
Oxygen 面向 KDE、Ubuntu 等
Fira Sans 面向 Firefox OS
Droid Sans 面向老版本 Android
第三组回退处理：
Helvetica Neue El Capitan 之前的 macOS 系统 UI 字体
sans-serif 字体回退
最后，应该指定一个通用系列的字体，尽量使字体的显示符合预期。
- 大型网站上的字体实践
知乎选择的字体
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans
GB,Microsoft YaHei,Arial,sans-serif谷歌香港
font-family: arial,sans-serif一般来说不推荐使用系统预装以外的字体，中文字多，往往下载一套字体会多达几M，从技术上来说不推荐。而且从网上下载的字体往往不可靠，可能还会产生版权问题。
另外，设置sans-serif其实也有兼容问题，在IE8上测试设置font-family:sans-serif;没有生效，最终渲染的字体还是宋体。在chrome版本 55上设置生效了，但在chrome版本 50上设置却不生效。附上兼容性表格，供大家参考
所以，如果不像谷歌搜索那样，完全不在乎字体的优美，建议还是要先针对不同平台设置好具体的中文字体。
完，欢迎指正。
参考：