CSS 程式札記 : 字型與文本

如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。

CSS 字型設定

字型家族（font-family）

font-family 是用來指定文本的字型。你可以指定一個或多個字型，然後會按順序尋找可用的字型。

.element {
    font-family: Arial, sans-serif; /* 如果沒有對應的字型(Arial)，就直接採用下一種字型 */
}

字型大小（font-size）

font-size 是用來設定字型的大小。你可以使用px、em、%等單位來設定大小。

.element {
    font-size: 16px; /* 設定字型大小為16像素 */
}

字型粗細（font-weight）

font-weight 是用來設定字型的粗細。使用的值是 normal、bold 和數值（如400、700等）。

.element {
    font-weight: bold; /* 設定字型為加粗 */
}

字型樣式（font-style）

font-style 主要用於設定斜體字。使用的值是 normal 和 italic。

.element {
    font-style: italic; /* 設定字型為斜體 */
}

CSS 文本排列和裝飾

文本對齊（text-align）

text-align 是用於設定文本的水平對齊方式。使用的值是 left、right、center 和 justify。

.element {
    text-align: center; /* 文本居中對齊 */
}

行高（line-height）

line-height 是用於設定文本的行高，這對於提升文本的可讀性非常重要。

.element {
    line-height: 1.5; /* 行高為字型大小的1.5倍 */
}

文本裝飾（text-decoration）

text-decoration 是用於添加文本的裝飾，如下劃線( underline )、上劃線( overline )和刪除線( line-through )。

.element {
    text-decoration: underline; /* 為文本添加下劃線 */
}

文本陰影（text-shadow）

text-shadow 是可以為文本添加陰影效果，這個屬性的四個值分別是控制陰影的水平偏移、垂直偏移、模糊半徑和顏色。

.element {
    text-shadow: 2px 2px 4px #000000; /* 添加黑色文本陰影 */
}

文本溢出（text-overflow）

text-overflow 是用於處理超出元素容器的文本。使用的值是 clip 和 ellipsis。

.element {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 文本超出時顯示省略號 */
}

字間距和字母間距

word-spacing 和 letter-spacing 能讓你調整單詞之間和字母之間的間距。

.element {
    word-spacing: 4px; /* 單詞間距為4像素 */
    letter-spacing: 2px; /* 字母間距為2像素 */
}

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡