溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS如何定義文本的字體樣式，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
CSS 字體
CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
CSS 字體系列
在 CSS 中，有兩種不同類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
Serif 字體
Sans-serif 字體
Monospace 字體
Cursive 字體
Fantasy 字體
指定字體系列
使用 font-family 屬性 定義文本的字體系列。
使用通用字體系列：如你希望文檔使用一種 sans-serif 字體，但是你并不關心是哪一種字體：
body {font-family: sans-serif;}指定字體系列：除了使用通用的字體系列，您還可以通過 font-family 屬性設置更具體的字體：
h2 {font-family: Georgia;}注意：如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h2 元素。
我們可以通過結合特定字體名和通用字體系列來解決這個問題：
h2 {font-family: Georgia, serif;}這樣，如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），
用戶代理就可能對 h2 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。
因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了候選字體。
如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體，然后用逗號進行連接：
p {font-family: Times, "New Century Schoolbook", Georgia, "New York", serif;}根據這個列表，用戶代理會按所列的順序（按照優先順序排列）查找這些字體。
如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。
提示：當字體名中有一個或多個空格（比如 New York），則需要在 font-family 聲明中加引號。
單引號或雙引號都可以接受。但是，在 HTML 的 style 屬性中，則需要注意單雙引號不能沖突：
<p style="font-family: Times,"New Century", Georgia, "New York", serif;">...</p>
字體風格
font-style 屬性最常用于規定斜體文本，該屬性有三個值：
normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示
italic 和 oblique 的區別
font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。
唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別。
斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。
與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。
字體變形
font-variant 屬性可以設定小型大寫字母。
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。
<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>
字體加粗
font-weight 屬性設置文本的粗細。使用 bold 關鍵字可以將文本設置為粗體。
關鍵字 100 ~ 900 為字體指定了 9 級加粗度。
如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別：
100 對應最細的字體變形，而900 對應最粗；數字 400 等價于 normal，700 等價于 bold。
如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。
與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。
字體大小
font-size 屬性設置文本的大小。
注意，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。
請始終使用正確的 HTML 標題，比如使用 <h2> - <h7> 來標記標題，使用 <p> 來標記段落。
font-size 值可以是絕對或相對值。
絕對值：
將文本設置為指定的大小
不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）
絕對大小在確定了輸出的物理尺寸時很有用
相對大小：
相對于周圍的元素來設置大小
允許用戶在瀏覽器改變文本大小
注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。
使用 em 來設置字體大小
使用像素來設置字體大小：通過像素設置文本大小，可以對文本大小進行完全控制。
使用 em 來設置字體大小：W3C 推薦使用 em 單位，可以在所有瀏覽器中調整文本大小。
1em 等于當前的字體尺寸。
如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。
在設置字體大小時，em 的值會相對于父元素的字體大小改變。
瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。
可以使用下面這個公式將像素轉換為 em：pixels/16=em
注釋：16 等于父元素的默認字體大小，假設父元素為 20px，那么公式為：pixels/20=em。
h2 {font-size:3.75em;} /* 60px/16=3.75em */
h3 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
結合使用百分比和 EM
在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設置默認的 font-size 值：
body {font-size:100%;}
h2 {font-size:3.75em;}
h3 {font-size:2.5em;}
p {font-size:0.875em;}注釋：在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
CSS 字體實例：
p.ex1 {font: italic arial,sans-serif;}
p.ex2 {font: italic bold 12px/30px arial,sans-serif;}注釋：本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。
CSS 字體 屬性及描述
font：簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family：設置字體系列。
font-size：設置字體的尺寸。
font-size-adjust：當首選字體不可用時，對替換字體進行智能縮放（CSS2.1 已刪除該屬性）
font-stretch：對字體進行水平拉伸（CSS2.1 已刪除該屬性）
font-style：設置字體風格。
font-variant：以小型大寫字體或者正常字體顯示文本。
font-weight：設置字體的粗細。
以上是“CSS如何定義文本的字體樣式”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
