CSS－使用 font-face 來設定字型的方法

雖然 CDN 很方便，但有時候是得用到這種方式比較穩定。

簡述

一般常用的是 url 的方式：

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;&display=swap');

但有些時候可能不想透過這種 url 的方式來處理，這時就可以改用 @font-face 的方式來改寫：

@font-face {
  font-family: 'Nunito';
  font-weight: 200;
  font-style: normal;
  src: url('../public/font/Nunito-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 200;
  font-style: italic;
  src: url('../public/font/Nunito-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 300;
  font-style: normal;
  src: url('../public/font/Nunito-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 300;
  font-style: italic;
  src: url('../public/font/Nunito-LightItalic.ttf') format('truetype');
}

這邊簡單來說就是在設定等一下要怎麼用它，摘要幾個重點：

• font-family 可以幫這個字型取名稱（如果你不想用原來的名字）
• font-weight 該字型的寬度數值
• font-style 哪一種樣式，例如：normal 或 italic
• src 檔案的位置，可以是專案資料夾，也可以是 url
• format 該字型的格式

副檔名	format
.woff	"woff"
.ttf	"truetype"
.ttf 或 .otf	"opentype"
.eto	"embedded-opentype"
.svg 或 .svgz	"svg"

如果想知道更多細節，推薦參考這篇。