試一試
font-family: "Georgia", serif;
font-family: "Gill Sans", sans-serif;
font-family: sans-serif;
font-family: serif;
font-family: cursive;
font-family: system-ui;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
section {
font-size: 1.2em;
}
值由逗號分隔，表示它們是備選項。瀏覽器會選擇列表中第一個被使用者計算機安裝的字型，或者可以透過 @font-face 規則下載的字型。
使用簡寫屬性 font 來一次性設定 font-size 和其他與字型相關的屬性通常很方便。
你應該始終在 font-family 列表中至少包含一個通用字型族名，因為無法保證任何給定的字型都可用。這使得瀏覽器在必要時能夠選擇一個可接受的備用字型。
font-family 屬性指定一個從最高優先順序到最低優先順序的字型列表。字型的選擇不會在列表中第一個存在於使用者系統上的字型處停止。相反，字型選擇是逐個字元進行的，因此如果一個可用字型沒有所需字元的字形，則會嘗試列表後面的字型。當一個字型只有某些樣式、變體或大小可用時，這些屬性也可能影響選擇哪個字型族。
語法
/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: math;
font-family: fangsong;
/* Global values */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;
font-family 屬性列出一個或多個由逗號分隔的字型族。每個字型族都指定為 <family-name> 或 <generic-name> 值。
下面的例子列出了兩個字型族，第一個是 <family-name>，第二個是 <generic-name>。
font-family: "Gill Sans Extrabold", sans-serif;
值
<family-name>-
字型族的名稱。這必須是單個
<string>值或由空格分隔的<custom-ident>值序列。字串值必須用引號括起來，但可以包含任何 Unicode 字元。自定義識別符號不用引號，但某些字元必須進行轉義。一個好的做法是，為包含空格、數字或除連字元以外的標點符號的字型族名稱加上引號。
另請參閱有效的字型族名稱。
<generic-name>-
通用字型族是一種備用機制，是當所有指定的字型都不可用時，保留樣式表作者部分意圖的一種方式。通用字型族名稱是關鍵字，並且不能用引號括起來。通用字型族應該是字型族名稱列表中的最後一項。定義了以下關鍵字：
serif-
字形有收尾筆畫，末端有外張或錐形，或有實際的襯線收尾。
例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。
sans-serif-
字形的筆畫末端是平直的。
例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。
monospace-
所有字形都有相同的固定寬度。
例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。
cursive-
手寫體字型中的字形通常具有連線筆畫或超出斜體字型的其他草書特徵。字形部分或完全連線，結果看起來更像手寫的鋼筆或毛筆字，而不是印刷字母。
例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。
fantasy-
Fantasy 字型主要是包含有趣的字元表示的裝飾性字型。
例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。
system-ui-
字形取自特定平臺上的預設使用者介面字型。由於世界各地的排版傳統差異很大，這個通用字型是為那些不能清晰地對映到其他通用字型的字型而提供的。
注意： 顧名思義，
system-ui旨在使 UI 元素看起來像原生應用，而不適用於排版大段文字。它可能會導致某些使用者顯示的字型不理想——例如，Windows 預設的 CJK 字型可能會很差地渲染拉丁文字，而lang屬性可能不會影響顯示的字型。一些作業系統不允許自定義system-ui，而瀏覽器通常允許自定義sans-serif字型族。對於大段落，請使用sans-serif或其他非 UI 字型族。 ui-serif-
預設的使用者介面 serif 字型。
ui-sans-serif-
預設的使用者介面 sans-serif 字型。
ui-monospace-
預設的使用者介面 monospace 字型。
ui-rounded-
具有圓潤特徵的預設使用者介面字型。
math-
這是為了表示數學的特殊文體需求：上標和下標、跨越多行的括號、巢狀表示式以及具有特殊含義的雙線字形。
fangsong-
一種介於襯線風格的宋體和草書風格的楷體之間的特殊中文字型風格。這種風格常用於政府檔案。
正式定義
| 初始值 | 取決於使用者代理 |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 離散 |
正式語法
font-family =
[ <family-name> | <generic-family> ]#
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>
<generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )
<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace
<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
示例
一些常見的字型族
.serif {
font-family: "Times", "Times New Roman", "Georgia", serif;
}
.sansserif {
font-family: "Verdana", "Helvetica", "Arial", sans-serif;
}
.monospace {
font-family: "Lucida Console", "Courier New", monospace;
}
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
.math {
font-family: math;
}
.fangsong {
font-family: fangsong;
}
有效的字型族名稱
以下宣告是有效的：
font-family: "Goudy Bookletter 1911", sans-serif;
以下宣告是無效的：
font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
以下示例技術上有效，但不推薦：
font-family:
Gill Sans Extrabold,
sans-serif;
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # 通用字型族 |
| CSS 字型模組第 4 級 # font-family 屬性 |
瀏覽器相容性
載入中…