CSS 那些你必须知道的知识 （字体，Auto）

前言

对于前端开发，或许流畅是最需要关注的问题，但是美观也是你需要关注的一部分，包括移动端等适配，这部分实现的基石便是CSS技术。

字体

字体可能是前端萌新们最容易忽略的一点，平时写网页的时候就觉得找适合自己的个性化的字体就好啦，然而发现在别人电脑上你的网页显示的样子和你想得完全不一样。这时候你开始怀疑一切似乎没那么简单，于是你开始学会了@font-face，于是你知道了去看别人网站的font-family是怎么写的。
上面说的就是我关于字体的辛酸历程，今天看了一篇优秀的博文，才意识到字体这个被我忽视了很久的问题是需要我们认真了解的。

关于字体分类，这里我们简单的说，其实就是分为衬线（serif）和无衬线（sans-serif）两类，其实除此之外还有别的，比如我们编辑器里经常使用的等宽字体，Fira Code或者微软最新的随着WT一起推出的Cascadia Code，一般在我们技术文章的代码块中，这种字体会占一席之地。
关于衬线字体，最熟知的可能是宋体和新罗马，但是注意宋体在大字号的表现效果并不好，一般不要这样用。
关于非衬线字体，Windows平台下最出名的就是雅黑了，Mac稍微多一点比如华文黑体，冬青黑体等。

关于引号，我们最好把有空格，中文，或者unicode编码的字体都加上引号，防止识别的时候出错。

接着就是说到正题了，对于font-family这个属性，很多人都不知道为什么是family，很好理解，因为我们的字体在不同系统，甚至不同型号的电脑上都可能是不一样的，一种字体当然无法满足所有的要求，拿淘宝首页的font-family举例：

.all {
  font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

1. 使用 tahoma 作为首选的西文字体，小字号下结构清晰端整、阅读辨识容易；
2. 用户电脑未预装 tohoma，则选择 arial 作为替代的西文字体，覆盖 windows 和 MAC OS；
3. Hiragino Sans GB 为冬青黑体，首选的中文字体，保证了 MAC 用户的观看体验；
   Windows 下没有预装冬青黑体，则使用 ‘\5b8b\4f53’ 宋体为替代的中文字体方案，小字号下有着不错的效果；
4. 最后使用无衬线系列字体 sans-serif 结尾，保证旧版本操作系统用户能选中一款电脑预装的无衬线字体，向下兼容。
   ( 该分析来自（https://github.com/chokcoco/iCSS/issues/6），作者（chokcoco）)

同时我们选择的时候也要注意，一定考虑到中西结合，英文在前（不会影响中文），Mac字体在前（Mac中文可能在Win中没有），最后以sans-serif结尾，保证非衬线字体在比较低级系统中也可以比较好的显示。

对于CSS-Tricks 网站的 font-family 定义，我们贴出来分析一下：

{
  font-family:
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

首先是system-ui，自适应我们系统的默认优先级字体；后面两个为了mac中一些低版本的情况做了兼容；segoe ui，为了Windows的字体做适配；Roboto，面向 Android 和一些新版的的 Chrome OS；中间的一行是为了低版本做适配的，最后的一行同上面淘宝首页的字体分析。

虽说不一定这样就是最好的，但一般情况下比较推荐大家使用。

Auto

为什么要记录Auto呢，因为这个非常常见的东西我很少用，看，我连怎么称呼它都不知道，在margin或者padding中，这个还是很常用的，简单的说我们实现水平垂直居中这个老掉牙的问题的最简单的方法就是用margin: auto;

当然，传统的dispaly: block; 是没法实现垂直居中的，只能实现水平居中，我们要把布局换成flex, grid之类的布局。

在flex布局中，我们常用的space-between也可以使用auto来实现，可以看到auto的一些功能也是在flex或者grid布局中得到更加直观的展现的，这里纪录一下Auto主要是看到这个出现的时候不要太陌生，它实现的东西其实是很容易看出来的。