上周和后端同学联调接口，我需要在页面展示后端返回了一堆linux的输出文本，样式排版变形，惨不忍睹。
看到这个，我瞬间明白这是white-space默认值搞的鬼，顺手就给设置成了white-space：pre。 可是问题解决了80%，空格是没有自动合并了，但是还是没有完全对其。
冥思苦想了一会，随手敲了个font- ，想起来了好像是等宽字体的问题，于是设置font-family：monospace，总算看到想要的结果了，开开心心把bug单回归了。
今天就看看书，顺便聊聊font-family相关的东西。
font-family，直面意思字体家族，所有font- 开头的属性都是和字体有关的。
一般我们会这样设置：
body{ font-family：'PingFang SC', 'Microsoft Yahei'，sans-serif; }
其实，font-family可设的值除了具体的字体名还有很多，serif、sans-serif、monospace、cursive、fantasy、system-ui，常用的就是前三个，含义解释分别是衬线字体、无衬线字体、等宽字体。
衬线字体，就是说笔画开始结束的地方有额外的装饰，而且笔画的粗细不一样，无衬线字体，就是没有这些个装饰，笔画粗细一样。
操作系统不同，内置的字体也会不同，windows常见的内置字体有
| 宋体 |
SimSun |
| 黑体 | SimHei |
| 微软雅黑 | Microsoft YaHei |
| 微软正黑体 | Microsoft JhengHei |
| 楷体 | KaiTi |
| 新宋体 | NSimSun |
| 仿宋 | FangSong |
其中，宋体就是属于衬线字体，微软雅黑就属于无衬线字体。
OS 操作系统内置字体有：
| 苹方 | PingFang SC |
| 华文黑体 | STHeiti |
| 华为楷体 | STKaiti |
| 华文宋体 | STSong |
| 华文仿宋 | STFangsong |
| 华文中宋 | STZhongsong |
等等，其中PingFang SC属于无衬线字体。可以看出苹果内置的字体有很多，这只是列举了常用的中文字体。
当我们设置了 font-family：'PingFang SC', 'Microsoft Yahei'，sans-serif; 后，操作系统会从左往右在本地字体库里面寻找，如果有相应的字体则应用到web页面。
等宽字体，一般中文字体都是等宽的，就是每个字符在font-seize相同的情况下占据的宽度一样，但是英文字符会出现问题，如iii 和 MMM ，同样三个字符宽度明显不一样。
等宽字体在web中有什么用呢？
1.有利于代码的呈现，一般编辑器或者web上需要呈现源代码的字体都是等宽字体。
2.用户体验上，需要一眼就能看出输入字符数是否一致时，或者类似我遇到的需要展示linux系统的输出内容时。
好了，就先说这么多。
参考张鑫旭的CSS世界。