Font families
我們通常使用font-family給你的text設(shè)置不同的字體，你可以使用這個屬性，給你選中的元素設(shè)置一個或者一系列的字體，瀏覽器只會將訪問當(dāng)前網(wǎng)站的用戶機器上有的字體應(yīng)用在當(dāng)前的元素上，如果你設(shè)置的字體用戶機器上并沒有，那么瀏覽器就會使用browser default font,
Web safe fonts
說到字體可用性，只有一定數(shù)量的字體可以在多個系統(tǒng)/機器上通用，使用這些字體完全不用擔(dān)心，這就是所謂的web safe fonts。
大多數(shù)情況，我們想要對展示在頁面上text所使用的字體有更具體的控制。但是要知道，網(wǎng)站上使用的字體是否能夠被正確的展示并讓用戶看到，取決于用戶機器或者操作系統(tǒng)中是否默認(rèn)的帶有此字體，然而想要獲取用戶機器上可用的字體有哪些，基本沒有辦法，那么如何解決這個問題呢？
好在有這一類web safe fonts，他們基本可以在所有的機器和操作系統(tǒng)上工作(Windows, macOS, the most common Linux distributions, Android, and iOS).
隨著操作系統(tǒng)的發(fā)展，實際的web safe fonts列表將會發(fā)生變化，但是目前下面的list中基本都是safe的font
| font family name | 字體類型 | Notes |
|---|---|---|
| Arial | sans-serif | 通常在使用這個字體的時候，會同時將Helvetica作為第一個首選替代的字體，雖然他們的字體樣式差不多，但是Helvetica字體形態(tài)會更好， |
| Courier New | monospace | 對于這種類型的font，有一些操作系統(tǒng)會有一個可選的替代字體Courier，但是最好的實踐還是使用Courier New作為首選字體 |
| Georgia | serif | |
| Times New Roman | serif | 一些操作系統(tǒng)還有這種字體的另一可選版本Times, 但是最好的實踐還是同時使用兩種字體 |
| Trebuchet MS | sans-serif | 注意這種字體在mobile上并沒有被廣泛的使用 |
| Verdana | sans-serif |
注意: 如果你想要獲取到更多web safe font以及各個操作系統(tǒng)的兼容性，請訪問 link. 當(dāng)然除了使用web safe font，你也可以在你的網(wǎng)站中使用@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提到的，這樣做，當(dāng)你提供的整個font list都不能工作的時候， 至少瀏覽器可以根據(jù)你提供的最后一個字體名字，將你的text渲染成一個和你需求大致類似的字體。
如果你提供的font stack完全無法工作，瀏覽器通常會給你的text設(shè)置默認(rèn)的字體類型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類型的字體
