文字屬性
字體大小（font-size）
設置文本的大小，可以使用絕對大小（如 px、pt）或相對大小（如 em、rem、百分比）。
p {
font-size: 16px;
}
h1 {
font-size: 2em;
}
字體顏色（color）
設置文本的顏色，可以使用顏色名稱、十六進制值、RGB 或 HSL 值。
p {
color: #333;
}
h1 {
color: rgb(255, 0, 0);
}
字體系列（font-family）
設置文本的字體，可以指定多個字體名稱，瀏覽器會從左到右依次查找。body {
font-family: 'Arial', sans-serif;
}
字體樣式（font-style）
設置文本的樣式，如普通、斜體等。
p {
font-style: italic;
}
字體粗細（font-weight）
設置文本的粗細，如正常、加粗等。
p {
font-weight: bold;
}
文本對齊
文本對齊（text-align）
設置文本在容器內的水平對齊方式。
p {
text-align: left; /* 左對齊 */
}
h1 {
text-align: center; /* 居中對齊 */
}
div {
text-align: right; /* 右對齊 */
}
行高（line-height）
設置文本行之間的距離。
p {
line-height: 1.5; /* 行高為字體大小的 1.5 倍 */
}
文字間距（letter-spacing）
設置文本中字符之間的間距。
p {
letter-spacing: 2px;
}
單詞間距（word-spacing）
設置文本中單詞之間的間距。
p {
word-spacing: 5px;
}
文本裝飾（text-decoration）
設置文本的裝飾，如下劃線、上劃線等。
p {
text-decoration: underline; /* 下劃線 */
}
h1 {
text-decoration: line-through; /* 刪除線 */
}
Google 字體
引入 Google 字體
可以通過在 HTML 文件的 <head> 部分添加 <link> 標籤來引入 Google 字體。
<head>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
</head>
使用 Google 字體
引入字體後，可以在 CSS 中使用 font-family 屬性來應用這些字體。
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* 使用粗體 */
}
示例
這裡是一個完整的示例，展示如何使用 Google 字體和文本屬性。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 文字屬性示例</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
color: #333;
line-height: 1.5;
}
h1 {
font-size: 2em;
text-align: center;
text-decoration: underline;
font-weight: 700;
}
p {
font-size: 16px;
text-align: justify;
letter-spacing: 1px;
word-spacing: 2px;
}
</style>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一段文本，展示了如何使用 CSS 文字屬性來控制文本的顯示效果。我們使用了 Google 字體、字體大小、字體顏色、行高、文本對齊、文字間距和單詞間距等屬性。</p>
</body>
</html>
