PJCHENder 未整理筆記

[CSS] font-face

2019-10-25

[CSS] font-face

@(CSS)[css]

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

1
2
3
4
5
6
7
8
9
10
11
12
/* 定義名為 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 來決定一個字體要如何和何時被下載使用:

1
2
3
4
5
6
/* 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。
Tags: css

掃描二維條碼,分享此文章