跳至主要内容

[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），載到字體才會使用 */

字體要顯示出來一共可以分成三個階段，分別是 block、swap 和 failure：

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