CSS 字型

Created: October-16, 2018

CSS 字型屬性允許你為字型設定各種樣式，如文字的字型系列，大小和粗體，變體等。

字型屬性

在 CSS 樣式為文字內容的字型提供多種特性，如： font-family ， font-style ， font-variant ， font-weight 和 font-size 。以下部分將逐一介紹這些屬性中的每一個。

字型系列

font-family CSS 屬性允許你設定字型系列名稱和/或通用姓氏的優先順序列表所選元素的文字內容。

該 font-family 屬性可以包含多個字型名稱作為後備系統。列出你想要的字型，然後列出第一個可能填寫的字型（如果它不可用）。你應該用通用的五個字型系列來結束名單- ， serif、sans-serif、monospace、cursive 和 fantasy。字型系列宣告可能如下所示：

p {
    font-family: "Times New Roman", Times, serif;
}

注意： 如果字型家族的名稱超過一個單詞，它必須用引號引起來，像 Times New Roman、Courier New、Trebuchet MS 等等。

要了解有關常用字型組合的更多資訊; 請檢視網頁安全字型。

字型樣式

font-style 屬性設定元素的文字內容的字型樣式。

此屬性的可能值為： normal ， italic 或 oblique 。

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

注意： 乍一看，傾斜和斜體樣式看起來都是一樣的，但是有區別。italic 樣式使用斜體版本的字型，而另一方面，oblique 文字只是普通字型的傾斜版本。

字型大小

font-size 屬性設定元素的文字內容的字型大小。

有幾種方法可以指定字型大小值，例如關鍵字，畫素或 ems。

用關鍵字設定字型大小

通過在 body 元素上設定關鍵字字型大小，你可以在頁面上的其他位置設定相對字型大小，使你能夠相應地在整個頁面上輕鬆地向上或向下縮放字型。字型絕對大小使用以下關鍵字之一指定 xx-small ， x-small ， small ， medium ， large ， x-large ， xx-large 。

使用以下關鍵字之一指定相對大小： smaller ， larger 。

用畫素設定字型大小

當你需要畫素精度時，以畫素值（例如 12px，16px 等）設定字型大小是一個不錯的選擇。但是，結果可能會在瀏覽器中有所不同，因為它們使用不同的演算法來實現類似的效果。

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

以畫素定義字型大小不是很容易訪問，因為使用者無法從瀏覽器設定更改字型大小。例如，視力有限的使用者可能希望將字型大小設定為大於你指定的大小。因此，如果要建立包容性設計，則應避免使用字型大小的畫素值。

提示： 可以使用縮放工具在所有瀏覽器中調整文字大小。但是，此功能會調整整個頁面的大小，而不僅僅是文字。

用 `Em` 設定字型大小

em 單元是指父元素的字型大小。

em 值的大小是動態的。定義 font-size 屬性時，em 等於應用於元素父級的字型大小。

如果你 font-size 在 body 元素上設定了 20px，那麼 1em = 20px 和 2em = 40px 。

如果你沒有在頁面上的任何位置設定字型大小，那麼它是瀏覽器預設值，可能是 16px。所以，預設情況下 1em = 16px ，和 2em = 32px 。

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

警告： IE6 和 IE7 不接受誇大調整太大和太小的文字的。（在釋出前測試）。

使用百分比和 Em 的組合

在所有瀏覽器中實現類似效果的解決方案是 font-size 為 body 元素設定預設百分比。一種流行的技術是將 body 的 font-size 設定為 62.5% （預設 16px 的 62.5%），相當於 10px 或 0.625em。

現在，你可以使用 em 單位為任何元素設定 font-size，用一些具有易於記憶的轉換，比如 px 除以 10。值通過這樣子如 10px = 1em ， 12px = 1.2em ， 14px = 1.4em ， 16px = 1.6em 等。請參閱以下示例：

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

提示： 在全球資訊網聯盟（W3C）中建議使用 EM 或百分比（%）值，以創造更強大的，可擴充套件的佈局。

字型重量

font-weight 屬性指定字型的粗細或粗體。

font-style 屬性的可能值是： normal ， bold ， bolder ， lighter ， 100 ， 200 ， 300 ， 400 ， 500 ， 600 ， 700 ， 800 ， 900 和 inherit。

數值 100 - 900 指定字型粗細，其中每個數字代表比其前身更深的權重。 400 跟 normal 是相同的， 700 跟 bold 是相同的。
bolder 和 lighter ，是相對於繼承字型的粗細，而其他的值是絕對字型權值。

p {
    font-weight: bold;
}

由於大多數字體僅以有限數量的權重提供; 通常它們只能以正常和 粗體顯示。如果字型在指定的重量中不可用，則將選擇最接近的可用重量的替代品。

字型變體

font-variant 屬性允許文字以特殊的小型大寫字母變體顯示。

小型大寫字母跟正常的大寫字母略有不同，其中它的小寫字母看起來跟相對應的大寫字母的較小的形式相同。

font-variant 屬性的可能值是 normal ， small-caps 和 inherit。

p {
    font-variant: small-caps;
}