概念

@font-face

@font-face 用來定義字型，可從載入外部資源或是 local 端的字型檔。

範例：

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

取自 MDN Web Docs - @font-face

@font-face 定義在應用程式中要使用的字型，用來告訴瀏覽器去哪裡下載。
font-family 是 CSS 屬性，指定特定的字型或是字型清單給元素。

範例：

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

body {
  font-family: "CustomFont", Arial, sans-serif;
}

相關屬性

• font-family：設定文字字型
• font-style：設定文字是否為斜體 (normal/ italic/ oblique)
• font-weight：設定字體粗細
• font-size：設定文字大小
• line-height：行距
• letter-spacing：設定字元間距
• word-spacing：單詞間距
• text-decoration-line：裝飾線種類 (underline/ overline/ line-through )
• text-decoration-color：裝飾線顏色
• text-decoration-style：裝飾線樣式 (solid/ double/ dotted/ dashed/ wavy)
• text-decoration-thickness：裝飾線粗細
• text-indent：縮排或凸排設定
• white-space：如何處理元素中的空白
• word-break：處理換行
• text-align：處理文字的水平對齊
• direction：改變 inline 元素的左右順序 (rtl/ ltr)
• writing-mode：改變文字流的方向 (horizontal-tb/ vertical-rl/ vertical-lr)
  • horizontal-tb：橫書，上到下
  • vertical-rl：直書，右到左
  • vertical-lr：直書，左到右
• text-orientation：設定行中字元的方向，只在 vertical mode 有影響 (horizontal-tb 無效)
• text-shadow：文字陰影