Font

Font families

我们通常使用font-family给你的text设置不同的字体，你可以使用这个属性，给你选中的元素设置一个或者一系列的字体，浏览器只会将访问当前网站的用户机器上有的字体应用在当前的元素上，如果你设置的字体用户机器上并没有，那么浏览器就会使用browser default font,

Web safe fonts

说到字体可用性，只有一定数量的字体可以在多个系统/机器上通用，使用这些字体完全不用担心，这就是所谓的web safe fonts。

大多数情况，我们想要对展示在页面上text所使用的字体有更具体的控制。但是要知道，网站上使用的字体是否能够被正确的展示并让用户看到，取决于用户机器或者操作系统中是否默认的带有此字体，然而想要获取用户机器上可用的字体有哪些，基本没有办法，那么如何解决这个问题呢？

好在有这一类web safe fonts，他们基本可以在所有的机器和操作系统上工作(Windows, macOS, the most common Linux distributions, Android, and iOS).

随着操作系统的发展，实际的web safe fonts列表将会发生变化，但是目前下面的list中基本都是safe的font

font family name	字体类型	Notes
Arial	sans-serif	通常在使用这个字体的时候，会同时将Helvetica作为第一个首选替代的字体，虽然他们的字体样式差不多，但是Helvetica字体形态会更好，
Courier New	monospace	对于这种类型的font，有一些操作系统会有一个可选的替代字体Courier，但是最好的实践还是使用Courier New作为首选字体
Georgia	serif
Times New Roman	serif	一些操作系统还有这种字体的另一可选版本Times, 但是最好的实践还是同时使用两种字体
Trebuchet MS	sans-serif	注意这种字体在mobile上并没有被广泛的使用
Verdana	sans-serif

注意: 如果你想要获取到更多web safe font以及各个操作系统的兼容性，请访问 link. 当然除了使用web safe font，你也可以在你的网站中使用@font-face定义一些custom font, 在你的站点中使用。

Default fonts

CSS 定义了5中常见的font， 他们的font name分别是: serif, sans-serif, monospace, cursive and fantasy.

Font stacks

既然无法保证你在站点上使用的字体类型是否能够工作，为了保证你text的字体能够尽可能的满足你的想法，于是CSS允许你给text提供font stack, 也就是一个字体列表。

浏览器会从左到右依次尝试字体是否可用，只要可用就立刻停止遍历。

最好在font stack的末尾提供一个generic font name就是上个section default font提到的，这样做，当你提供的整个font list都不能工作的时候， 至少浏览器可以根据你提供的最后一个字体名字，将你的text渲染成一个和你需求大致类似的字体。

如果你提供的font stack完全无法工作，浏览器通常会给你的text设置默认的字体类型serif， 通常是字体Times New Roman

注意，提供font stack的时候，只要font name中包含空格，这个font name必须使用双引号包裹起来

例子

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

// 给P 的font stack的末尾加上sans-serif，如果前几个都不能工作，那么给P一个sans-serif类型的字体