CSS 字體 · W3School HTML & CSS 教程

# CSS 字體 **CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。** ## CSS 字體系列在 CSS 中，有兩種不同類型的字體系列名稱： * 通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"） * 特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列： * Serif 字體 * Sans-serif 字體 * Monospace 字體 * Cursive 字體 * Fantasy 字體如果需要了解更多有關字體系列的知識，請閱讀 [CSS 字體系列](/css/css_font-family.asp "CSS 字體系列")。 ## 指定字體系列使用 [font-family 屬性](/cssref/pr_font_font-family.asp "CSS font-family 屬性") 定義文本的字體系列。 ### 使用通用字體系列如果你希望文檔使用一種 sans-serif 字體，但是你并不關心是哪一種字體，以下就是一個合適的聲明： ``` body {font-family: sans-serif;} ``` 這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），并將其應用到 body 元素。因為有繼承，這種字體選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。 ### 指定字體系列除了使用通用的字體系列，您還可以通過 font-family 屬性設置更具體的字體。下面的例子為所有 h1 元素設置了 Georgia 字體： ``` h1 {font-family: Georgia;} ``` 這樣的規則同時會產生另外一個問題，如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。我們可以通過結合特定字體名和通用字體系列來解決這個問題： ``` h1 {font-family: Georgia, serif;} ``` 如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條后路，在用戶代理無法提供與規則匹配的特定字體時，就可以選擇一個候選字體。如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優先順序排列，然后用逗號進行連接： ``` p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;} ``` 根據這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。 ### 使用引號您也許已經注意到了，上面的例子中使用了單引號。只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號： ``` <p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p> ``` ## 字體風格 [font-style 屬性](/cssref/pr_font_font-style.asp "CSS font-style 屬性")最常用于規定斜體文本。該屬性有三個值： * normal - 文本正常顯示 * italic - 文本斜體顯示 * oblique - 文本傾斜顯示 ### 實例 ``` p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} ``` ### italic 和 oblique 的區別 font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別。斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。 ## 字體變形 [font-variant 屬性](/cssref/pr_font_font-variant.asp "CSS font-variant 屬性")可以設定小型大寫字母。小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。 ### 實例 ``` p {font-variant:small-caps;} ``` ## 字體加粗 [font-weight 屬性](/cssref/pr_font_weight.asp "CSS font-weight 屬性")設置文本的粗細。使用 bold 關鍵字可以將文本設置為粗體。關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。 ### 實例 ``` p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} ``` ## 字體大小 [font-size 屬性](/cssref/pr_font_font-size.asp "CSS font-size 屬性")設置文本的大小。有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。 font-size 值可以是絕對或相對值。絕對值： * 將文本設置為指定的大小 * 不允許用戶在所有瀏覽器中改變文本大小（不利于可用性） * 絕對大小在確定了輸出的物理尺寸時很有用相對大小： * 相對于周圍的元素來設置大小 * 允許用戶在瀏覽器改變文本大小注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。 ### 使用像素來設置字體大小通過像素設置文本大小，可以對文本大小進行完全控制： #### 實例 ``` h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;} ``` 在 Firefox, Chrome, and Safari 中，可以重新調整以上例子的文本大小，但是在 Internet Explorer 中不行。雖然可以通過瀏覽器的縮放工具調整文本大小，但是這實際上是對整個頁面的調整，而不僅限于文本。 ### 使用 em 來設置字體大小如果要避免在 Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替 pixels。 W3C 推薦使用 em 尺寸單位。 1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設置字體大小時，em 的值會相對于父元素的字體大小改變。瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。可以使用下面這個公式將像素轉換為 em：_pixels_/16=_em_ （注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那么公式需改為：_pixels_/20=_em_） #### 實例 ``` h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */ ``` 在上面的例子中，以 em 為單位的文本大小與前一個例子中以像素計的文本是相同的。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。不幸的是，在 IE 中仍存在問題。在重設文本大小時，會比正常的尺寸更大或更小。 ### 結合使用百分比和 EM 在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設置默認的 font-size 值： #### 實例 ``` body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;} ``` 我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。 ## CSS 字體實例： [設置文本的字體](/tiy/t.asp?f=csse_font-family) [設置字體尺寸](/tiy/t.asp?f=csse_font-size) [設置字體風格](/tiy/t.asp?f=csse_font-style) [設置字體的異體](/tiy/t.asp?f=csse_font-variant) [設置字體的粗細](/tiy/t.asp?f=csse_font-weight) [所有字體屬性在一個聲明之內](/tiy/t.asp?f=csse_font) ## CSS 字體屬性 | 屬性 | 描述 | | --- | --- | | [font](/cssref/pr_font_font.asp "CSS font 屬性") | 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。 | | [font-family](/cssref/pr_font_font-family.asp "CSS font-family 屬性") | 設置字體系列。 | | [font-size](/cssref/pr_font_font-size.asp "CSS font-size 屬性") | 設置字體的尺寸。 | | [font-size-adjust](/cssref/pr_font_font-size-adjust.asp "CSS font-size-adjust 屬性") | 當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。） | | [font-stretch](/cssref/pr_font_font-stretch.asp "CSS font-stretch 屬性") | 對字體進行水平拉伸。（CSS2.1 已刪除該屬性。） | | [font-style](/cssref/pr_font_font-style.asp "CSS font-style 屬性") | 設置字體風格。 | | [font-variant](/cssref/pr_font_font-variant.asp "CSS font-variant 屬性") | 以小型大寫字體或者正常字體顯示文本。 | | [font-weight](/cssref/pr_font_weight.asp "CSS font-weight 屬性") | 設置字體的粗細。 |