資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 在一個宣告中設定所有字型屬性？
CSS 或層疊樣式表，是一個強大的工具，它提供了各種屬性來對齊和定位網頁上的字型。字型宣告屬性是 CSS 中眾多屬性之一。在 CSS 中，可以使用簡寫屬性在一個宣告中設定所有字型屬性。此屬性允許在一行程式碼中指定字型樣式、變體、粗細、大小、行高、系列、文字修飾和文字轉換。
在 CSS 中設定字型屬性
CSS 提供了各種用於設定文字樣式的字型屬性，這些屬性用於設定網頁上的文字樣式，例如 font-family、font-size、font-style、font-weight、line-height、text-decoration、text-transform 和 font-variant。
CSS 字型簡寫屬性的語法
字型簡寫屬性用於在一個宣告中設定所有字型屬性。字型簡寫屬性的語法如下所示：
css selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}
在以上語法中，
Font-style - 此屬性設定字型樣式，例如 normal、italic 或 oblique。
Font-variant - 此屬性設定字型變體，例如 normal 或 small-caps。
Font-weight - 此屬性設定字型粗細，例如 bold 或 normal。
Font-size - 此屬性以畫素、em 或其他單位設定字型大小。
Line-height - 此屬性設定行高，即文字行之間的間距。
Font-family - 此屬性設定字體系列，例如 Arial、Times New Roman 或自定義字型。
使用字型屬性設定字體系列
在 CSS 中，font-family 屬性用於指定文字的字體系列。這可以是特定的字型名稱或通用字體系列，例如 sans-serif、serif 或 monospace。字體系列透過將 font-family 屬性新增到字型宣告的末尾來設定，為此我們使用字型簡寫屬性。例如：
body {
font: normal normal 400 16px/1.5 Arial;
}
在以上示例中，我們已將字體系列設定為“Arial”。
使用字型屬性設定字型大小
font-size 屬性用於指定文字的大小。這可以是特定的大小，例如 16px，或相對的大小，例如 larger 或 smaller。字型大小透過將 font-size 屬性新增到字型宣告的末尾來設定，為此我們使用字型簡寫屬性。例如：
body {
font: normal normal 400 16px/1.5 Arial;
}
在以上示例中，我們已將字型大小設定為“16px”。
使用字型屬性設定字型樣式
font-style 屬性用於指定文字的樣式，例如 italic 或 normal。字型樣式透過將 font-style 屬性新增到字型宣告的開頭來設定，為此我們使用字型簡寫屬性。例如：
body {
font: italic normal 400 16px/1.5 Arial;
}
在以上示例中，我們已將字型樣式設定為“italic”。
使用字型屬性設定字型粗細
font-weight 屬性用於指定文字的粗細，例如 bold 或 normal。字型粗細透過將 font-weight 屬性新增到字型宣告的第三個位置來設定，為此我們使用字型簡寫屬性。
body {
font: normal normal bold 16px/1.5
}
在以上示例中，我們已將字型粗細設定為“bold”。
使用字型屬性設定行高
line-height 屬性用於指定文字行之間的間距。行高透過在字型宣告中將 line-height 屬性新增到字型大小之後來設定，為此我們使用字型簡寫屬性。它由正斜槓分隔。例如：
body {
font: normal normal bold 16px/1.5
}
在以上示例中，我們已將行高設定為“1.5”。
使用字型屬性設定字型變體
font-variant 屬性用於指定字型變體，例如 small-caps 或 normal。字型變體透過在字型宣告中將 font-variant 屬性新增到字型樣式之後來設定，為此我們使用字型簡寫屬性。例如：
p {
font: normal small-caps bold 24px/1.5 Arial;
}
在以上示例中，我們已將 font-variant 設定為“small-caps”。
此外，我們可以使用 text-transform 屬性和 text-decoration 屬性來設定文字轉換和文字修飾。
在瞭解瞭如何使用字型簡寫屬性設定每個字型屬性後。現在，讓我們看看如何將它們組合在一起的示例。
示例 1
在下面的示例中，我們已將字型樣式設定為 italic，字型變體設定為 small-caps，字型粗細設定為 bold，字型大小設定為 16px，行高為 1.5，字體系列為 Georgia，serif，文字轉換設定為 capitalize。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: italic small-caps bold 16px/1.5 Georgia serif capitalize;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
示例 2
這是另一個使用 CSS 在一個宣告中設定所有字型屬性的示例。
<!DOCTYPE html>
<html>
<head>
<title>Blur Effect Example</title>
<style>
h1 {
font: normal normal bold 36px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font: italic normal 400 24px/1.5 "Times New Roman", Times, serif;
}
p {
font: normal normal 400 18px/1.5 "Open Sans", sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>
結論
CSS 中的字型簡寫屬性提供了一種簡單有效的方法，可以在一行程式碼中設定多個字型屬性。透過使用字型簡寫屬性，我們可以在一個宣告中指定字型樣式、變體、粗細、大小、行高、系列、文字修飾和文字轉換。
2K+ 閱讀量
