學習如何在CSS中使用字型
在Web的黎明時期，你只能選擇少數幾種字型。
幸運的是，如今你可以在你的網頁上載入任何種類的字型。
CSS在字型方面在多年來獲得了許多不錯的功能。
font屬性是一些屬性的縮寫：
font-familyfont-weightfont-stretchfont-stylefont-size
讓我們逐一介紹它們，然後再討論font。
接著，我們將討論如何載入自訂字型，可以使用@import或@font-face，或通過載入字型樣式表來載入。
font-family
設置元素將使用的字型家族。
為什麼是"家族"? 因為我們所了解的字型實際上是由幾個子字型組成的，這些子字型提供了我們所需要的所有樣式（粗體、斜體、輕鬆等）。
這是我Mac上的Font Book應用程式中的一個示例 - Fira Code字型家族下面有幾個專用字型：
這個屬性讓你可以選擇特定的字型，例如：
body {
font-family: Helvetica;
}
你可以設置多個值，所以如果第一個值由於某些原因不能使用（例如在機器上找不到或下載字型的網絡連接失敗），則使用第二個值：
body {
font-family: Helvetica, Arial;
}
到目前為止，我使用了一些特定的字型，我們稱之為Web安全字型，因為它們預安裝在不同的操作系統中。
我們將它們分成有衬线字体、无衬线字体和等宽字体。以下是一些最受歡迎的列表：
有衬线字体
- Georgia
- Palatino
- Times New Roman
- Times
无衬线字体
- Arial
- Helvetica
- Verdana
- Geneva
- Tahoma
- Lucida Grande
- Impact
- Trebuchet MS
- Arial Black
等宽字体
- Courier New
- Courier
- Lucida Console
- Monaco
你可以將所有這些用作font-family屬性，但是不能保證它們在每個系統上都存在。還有其他的字体，对于它们的支持程度各不相同。
你也可以使用通用名称：
sans-serif无衬线字体serif有衬线字体monospace等宽字体cursive用于模拟手写文本fantasy名字中已经说明了一切
通常在font-family定义的末尾使用这些通用名称，以提供后备值，以防止无法应用其他样式：
body {
font-family: Helvetica, Arial, sans-serif;
}
font-weight
此屬性設置字型的宽度。你可以使用以下預定義的值：
normal正常字体bold粗體字体bolder（相对于父元素）更粗一点lighter（相对于父元素）更细一点
或使用數字關鍵字：
- 100
- 200
- 300
- 400，映射為
normal - 500
- 600
- 700，映射為
bold - 800
- 900
其中100是最輕的字型，900是最粗的。
一些數字值可能不映射到字型，因為字型必須在字型家族中提供。當缺失字型時，CSS使該數字至少與前一個字型一樣粗，所以你可能會有指向同一字型的數字。
font-stretch
如果可用，允许选择字型的窄或宽面。
這一點很重要：字型必須配備不同的面向。
允许的值从较窄到较宽：
ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expanded
font-style
允許你对字体應用斜體方式：
p {
font-style: italic;
}
此屬性還允許使用oblique和normal這兩個值。使用italic和oblique之間幾乎沒有差異，對我來說第一個更容易，因為HTML已經提供了一個i元素，表示斜體。
font-size
此屬性用於確定字型的大小。
你可以傳遞兩種類型的值：
- 長度值，例如
px、em、rem等等，或百分比 - 預定義的值關鍵字
对于第二种情况，你可以使用以下值：
xx-smallx-smallsmallmediumlargex-largexx-largesmaller（相对于父元素）larger（相对于父元素）
使用方法：
p {
font-size: 20px;
}
li {
font-size: medium;
}
font-variant
此屬性最初用於將文本更改為小寫字母，它只有3個有效的值：
normalinheritsmall-caps
小寫字母表示文本在其大寫字母旁邊以“更小的大寫字母”呈現。
font
font屬性使你可以在一個屬性中應用不同的字型屬性，從而減少雜亂。
我們至少必須設置2個屬性，font-size和font-family，其他屬性是可選的：
body {
font: 20px Helvetica;
}
如果我們添加其他屬性，它們需要按照正確的順序放置。
這是正確的順序：
font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;
示例：
body {
font: italic bold 20px Helvetica;
}
section {
font: small-caps bold 20px Helvetica;
}
使用@font-face加载自定义字型
@font-face允许你添加一個新的字型家族名稱，並將其映射到保存字型的文件。
這個字型將由瀏覽器下載並在頁面中使用，這對Web上的排版產生了重大變革-現在我們可以使用任何我們想要的字型。
我們可以將@font-face聲明直接添加到我們的CSS中，或者鏈接到專門用於導入字型的CSS文件。
在我們的CSS文件中，我們也可以使用@import來加載該CSS文件。
@font-face聲明包含了我們用來定義字型的幾個屬性，包括src，指向字型的URI（一個或多個URI）。這遵循同源策略，這意味著字型只能從當前源（域名+端口+協議）下載。
字型通常是以下格式：
woff（Web Open Font Format）woff2（Web Open Font Format 2.0）eot（Embedded Open Type）otf（OpenType字型）ttf（TrueType字型）
以下屬性允許我們定義要加載的字型的屬性，如前所述：
font-familyfont-weightfont-stylefont-stretch
關於性能的一點注意事項
當然，載入字型會對性能產生影響，這在創建頁面設計時必須考慮到。