Font.md

字體(font)是網頁設計中呈現品牌風格與提高可讀性的重要元素。以下為 CSS 中與文字外觀、排版、樣式控制相關的屬性與觀念整理:


1. font-family:字體家族

定義文字的字型。可依序指定多個字體,當第一個無法顯示時,會使用備選字體。

font-family: "Helvetica", Arial, sans-serif;

2. font-size:字體大小

設定文字的大小。常見單位有:

  • px:像素,固定大小

  • em:相對於父元素的字體大小

  • rem:相對於根元素的字體大小

  • %:相對於父元素的百分比

font-size: 1.2rem;

3. font-weight:字體粗細

設定文字是否為粗體。 常見值:normalboldlighterbolder 或數值(100900,以 400 為常態)。

font-weight: 700;

4. font-style:字體樣式

設定文字是否為斜體。

  • normal(正常)

  • italic(斜體)

  • oblique(傾斜)

font-style: italic;

5. line-height:行距

控制每行文字的垂直間距,有助於可讀性。

line-height: 1.5;

6. letter-spacing:字母間距

設定字母之間的水平間距。

letter-spacing: 0.05em;

7. word-spacing:單字間距

設定單字之間的距離。

word-spacing: 4px;

8. text-align:文字對齊

設定文字的水平對齊方式。

  • left:靠左

  • center:置中

  • right:靠右

  • justify:左右對齊

text-align: justify;

9. colorbackground-color

  • color:文字顏色

  • background-color:背景顏色

color: #222;
background-color: #f5f5f5;

10. opacity:透明度

設定整體元素的透明度。

opacity: 0.8;

字體分類與備援

  • Serif(襯線字體):字母末端有裝飾線條,如 Times New Roman。

  • Sans-serif(非襯線字體):字母簡潔無襯線,如 Arial、Helvetica。

  • 建議設定多個備援字體,確保不同裝置都能正常顯示。


外部字體載入

Google Fonts 使用方法:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
font-family: 'Roboto', sans-serif;

@font-face 自定義字型

可使用本機或遠端字體來源。

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

這些屬性與技術組合起來可打造具備專業外觀、品牌風格與高可讀性的文字設計。

Last updated