《CSS 權(quán)威指南（第三版）》閱讀隨筆

CSS 中規(guī)范了字體的大小、傾斜、加粗、字體等屬性，下面先看一下字體屬性。

字體系列

在不同計(jì)算機(jī)系統(tǒng)平臺(tái)，比如 window、macOS、linux、unix 等下，會(huì)存在差異化的字體庫(kù)，即使在相同平臺(tái)下，不同 web 代理瀏覽器也會(huì)存在差異，因此在設(shè)置字體方面，很難做到大一統(tǒng)。雖然沒(méi)有徹底統(tǒng)一的字體標(biāo)準(zhǔn)，但 CSS 語(yǔ)言還是在一定程度上相對(duì)統(tǒng)一了一些規(guī)范，產(chǎn)生了一些比較通用的字體比如 serif、san-serif、Monospace、Cursive、Fantasy 等，只需設(shè)置 CSS 的 font-family 屬性，即可設(shè)置相應(yīng)的字體。比如：

body { font-family: serif; }

當(dāng)然，差異化的字體，諸如 Geogria 等也可以通過(guò)該屬性來(lái)配置：

body { font-family: Geogria; }

在字體不可用的情況下，代理會(huì)設(shè)置為系統(tǒng)默認(rèn)字體取代。另外，也可以通過(guò)下載字體的方式來(lái)引入外部字體，不過(guò)該方式會(huì)損耗掉一部分性能，因此不推薦。

在使用 font-family 時(shí)，規(guī)范了一些用法，需要注意：

字體兼容

當(dāng)預(yù)設(shè)的 font-family 字體代理無(wú)法識(shí)別時(shí)，還可以退而求其次，再預(yù)留另一個(gè)字體作為備選。比如不是任何平臺(tái)都有 Geagria 字體，但是幾乎都會(huì)有 serif 字體：

body { font-family: Geogria,serif; }

多字體兼容

當(dāng)然，可以預(yù)留不只一種字體，其余打算預(yù)留的字體都可以通過(guò)逗號(hào)間隔來(lái)配置，在執(zhí)行時(shí)，代理會(huì)按順序依次進(jìn)行匹配，優(yōu)先配置靠前的字體：

body { font-family: Geogria,Times,serif; }

引號(hào)規(guī)則

對(duì)于預(yù)設(shè)字體，如果其命名存在空格或者特殊符號(hào)，諸如 $、# 等，均需要加引號(hào)處理，否則代理會(huì)忽略孩字體：

body { font-family: 'New York',serif; }

引號(hào)沖突規(guī)則

另外，如果 font-family 屬性放在頁(yè)面標(biāo)簽中配置時(shí)，需要主要避免與設(shè)置 style 屬性的引號(hào)發(fā)生沖突：

<p style="font-family:'New York',serif;">
CSS Style1
</p>
<p style='font-family:"New York",serif;'>
CSS Style2
</p>