昨天封面是 Vue，今天換 React 當封面主角！剛好我前陣子有努力惡補了一點 React，雖然還是不太會寫，但有特別整理成簡報，有興趣歡迎來看看呦！
繼續 CSS！
昨天介紹了文字顏色、邊框、外邊框、陰影與透明度，這些屬性能為網頁建立清楚的視覺層次。除了元素本身的外觀，文字也是影響使用者閱讀體驗的重要部分。
今天要來認識 CSS 的文字樣式屬性，透過字體大小、粗細、字體家族、斜體與文字裝飾，讓內容更容易閱讀，也能更有效地呈現重點。
直接開始介紹吧！╰(°▽°)╯
font-size 屬性可用於設定文字大小，是影響可讀性的關鍵因素之一。文字排版時，可以利用較大的字體作為標題、適中字體作為內文，能有效建立內容層次。該屬性支援多種單位設定，可依照不同需求選擇合適的單位來控制字體大小。
常用單位
px（像素）：絕對單位，跨瀏覽器表現一致。
p { font-size: 16px; }
h1 { font-size: 32px; }
%（百分比）：相對單位，相對於父元素的百分比。
.parent {
font-size: 20px;
.child {
font-size: 150%; /* 實際為 30px */
}
}
em：相對單位，相對於父元素的字體大小；當調整父元素的字體大小時，內部子元素也會跟著更動。
.parent {
font-size: 16px;
.child {
font-size: 1.5em; /* 實際為 24px (16px × 1.5) */
}
}
rem：相對單位，相對於根元素（<html>）的字體大小；當調整根元素的字體大小時，使用 rem 作為單位的元素都會更動。
html { font-size: 16px; }
p { font-size: 1rem; } /* 16px */
h1 { font-size: 2rem; } /* 32px */
使用建議
一般內文建議使用 14px～18px 之間的文字大小，避免使用過小的字體（小於 12px），避免影響閱讀體驗。
優先使用 rem 作為字體大小單位，可以更方便地實現響應式的文字大小調整。
在使用輸入框和按鈕等元件時，若文字大小小於 16px，iOS Safari 瀏覽器點擊時會觸發「放大」效果。如果不希望介面因放大而位移，請注意這類元件的字體大小。
font-weight 屬性可用於設定文字的粗細程度，是強調重要內容和建立視覺層次的重要工具。透過使用較粗的文字作為標題、選用適當的粗細作為內文，能有效增加資訊的層次感。
由於粗細效果取決於字體本身的設計，使用時需注意所選字體是否支援完整的字重範圍，如果字體缺乏特定字重的版本，瀏覽器將選用最接近的可用字重。為了達到最佳視覺呈現，建議使用有完整字重的字體。
數值設定
字體粗細可以使用數值 100～900 表示，每 100 為一個級距，數字越大代表字體越粗。
.thin {
font-weight: 100;
} /* 極細 */
.light {
font-weight: 300;
} /* 細體 */
.normal {
font-weight: 400;
} /* 正常(預設) */
.medium {
font-weight: 500;
} /* 中等 */
.semibold {
font-weight: 600;
} /* 半粗體 */
.bold {
font-weight: 700;
} /* 粗體 */
.extrabold {
font-weight: 800;
} /* 特粗 */
.black {
font-weight: 900;
} /* 極粗 */
也可以使用關鍵字來設定：
p {
font-weight: normal;
} /* 等同於 400 */
strong {
font-weight: bold;
} /* 等同於 700 */
使用建議
font-family 屬性用來設定元素使用的字體，為了避免網頁出現缺字情況，可以指定多個備用字體。
基本語法
多個字體以逗號分隔。
含有空格的字體名稱需用引號括起來。
字體按優先順序從左到右排列。
字體設定
建議的字體優先排列順序：
serif、sans-serif、monospace、cursive。由於不同瀏覽器可能對應到不同的實際字體，我們統一使用這些關鍵字來表示預設字體類型。系統預設字體
在網頁設計中，為確保字體能正常顯示，會選用已安裝在使用者電腦上的系統預設字體，作為主要或備用的字體使用。以下依照字體類型，整理各系統常見的預設字體，供網頁設計時參考：
襯線體（Serif）：筆畫末端有裝飾性線條，中文又稱「明體、宋體」，常被使用於印刷品、正式文件及長篇閱讀。
英文字體：Georgia、Times New Roman
中文字體：新細明體（PMingLiU）、儷宋 Pro（LiSong Pro）、宋體-簡（Songti SC）
瀏覽器預設關鍵字：serif
無襯線體（Sans-serif）：筆畫末端簡潔沒有裝飾，中文又稱「黑體」，常被使用於螢幕閱讀、網頁內容。
英文字體：Segoe UI、Verdana、Arial、Helvetica
中文字體：微軟正黑體（Microsoft JhengHei）、蘋方（PingFang TC）
瀏覽器預設關鍵字：sans-serif
**等寬字體（Monospace）：**每個字元寬度相同，適合程式碼顯示。
**手寫體（Cursive）：**模擬手寫效果的字體，適合裝飾性文字。
網頁字體 (Web Fonts)
除了上述介紹的系統預設字體外，若想在網頁中使用特殊字體，直覺做法是將字體檔案附加於網頁專案中，但這可能會導致以下問題：
為解決上述問題，我們可使用「網頁字體」服務，例如：Google Fonts、Adobe Fonts 等。使用網頁字體服務，就可以於網頁上使用特殊字體了！
完全免費且開源，授權允許商業使用及網頁嵌入。
熱門字體：
使用方式：
使用建議
font-style 屬性可用於設定文字斜體效果。由於斜體樣式取決於字體本身的設計，使用時需注意所選字體是否支援真正的斜體字。若字體缺乏斜體版本，瀏覽器將自動傾斜正常文字以模擬斜體效果。為達到最佳視覺呈現，建議選用具備完整斜體支援的字體。
.text {
font-style: normal; /* 預設 */
font-style: italic; /* 斜體 */
}
text-decoration 屬性用來設定文字底線，瀏覽器預設樣式會為連結新增底線，若想移除底線可以使用這個屬性。
.text {
text-decoration: underline; /* 新增底線 */
text-decoration: line-through; /* 新增刪除線 */
text-decoration: none; /* 移除底線（常用於連結）*/
}
今天介紹了 CSS 中常見的文字樣式屬性，這些屬性可以分成三個面向：文字大小與粗細、字體選擇，以及文字的斜體與裝飾。
font-size 搭配 px、%、em 或 rem 控制文字大小。一般內文應優先考量可讀性，並可使用 rem 建立較容易維護的尺寸系統。font-weight 調整文字粗細，數值範圍通常為 100 到 900，也可以使用 normal、bold 等關鍵字。font-family 設定字體時，應依序提供英文字體、中文字體、備用字體與通用字體家族，降低缺字或字體無法載入的問題。font-style 設定斜體，使用 text-decoration 設定底線、刪除線或移除裝飾。實際設計時，不應只追求特殊效果，而應同時考慮閱讀舒適度、字體授權、載入效能與不同裝置的顯示結果。先建立清楚的文字層級，再搭配合適的字體與裝飾，才能讓內容更容易閱讀，也讓網頁的視覺風格保持一致。
iThome鐵人賽
看影片追技術