Skip to main content

[CSS] font-face

透過 @font-face 可以自己定義在 HTML 中使用的字體:

/* 定義名為 Awesome Font 的字體 */@font-face {  font-family: 'Awesome Font';  font-style: normal;  font-weight: 400;  src: local('Awesome Font'), url('/fonts/awesome-l.woff2') format('woff2'), url('/fonts/awesome-l.woff')      format('woff'), url('/fonts/awesome-l.ttf') format('ttf'), url('/fonts/awesome-l.eot') format('eot');  unicode-range: U+000-5FF; /* Latin glyphs */}

屬性#

font-display#

透過 font-display 來決定一個字體要如何和何時被下載使用:

/* Keyword values */font-display: auto; /* 根據瀏覽器自行定義 */font-display: block; /* 相較之下有較長的阻塞(block),載到字體後使用 */font-display: swap; /* 相較之下有較短的阻塞(block),載到字體後使用 */font-display: fallback; /* 相較之下有較短的阻塞(block),一定時間內載到字體才會使用 */font-display: optional; /* 相較之下有較短的阻塞(block),載到字體才會使用 */

字體要顯示出來一共可以分成三個階段,分別是 blockswapfailure

  • block:如果字體還沒載入,會看不到(invisible),此時若字體成功載入則可以正常使用。
  • swap:如果字體還沒載入,會使用 fallback font face,此時若字體成功載入則可以正常使用。
  • failure:如果字體還沒載入,瀏覽器會認為載入失敗,使用一般的字體作為 fallback。