font-display
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2020ë 1ì.
font-display ì¤ëª
ì(descriptor)ë font faceê° íìëë ë°©ë²ì ê²°ì í©ëë¤. ì´ë ë¤ì´ë¡ë ì¬ë¶ì ì¬ì© ì기ì ë°ë¼ ë¤ë¦
ëë¤.
The font display timeline
font display ìê°íë ì ì ìì´ì í¸ê° ì§ì ë ë¤ì´ë¡ë í°í¸ë¥¼ ì¬ì©íë ¤ë ìê° ììíë íì´ë¨¸ë¥¼ 기ë°ì¼ë¡ í©ëë¤. ìê°íë ìëì ì¸ ê°ì§ 기ê°(period)ì¼ë¡ ëëì´ì ¸ font face를 ì¬ì©íë 모ë ìì(element)ì ë ëë§ ëìì ëíë ëë¤.
- í°í¸ ì°¨ë¨ ê¸°ê°
-
font faceê° ë¡ëëì§ ìì ê²½ì° font face를 ì¬ì©íë ¤ë ììë ë³´ì´ì§ ìë ëì²´ í°í¸ë¥¼ ë ëë§ í©ëë¤. ì´ ê¸°ê° ëì font faceê° ì±ê³µì ì¼ë¡ ë¡ëëë©´ ìì²ë í°í¸ë¡ ë¤ì ë ëë§ ë©ëë¤.
- í°í¸ êµì²´ 기ê°
-
font faceê° ë¡ëëì§ ìì ê²½ì° font face를 ì¬ì©íë ¤ë ììë (í ì¤í¸ê° íìëë)ëì²´ í°í¸ë¥¼ ë ëë§ í©ëë¤. ì´ ê¸°ê° ëì font faceê° ì±ê³µì ì¼ë¡ ë¡ëëë©´ ìì²ë í°í¸ë¡ ë¤ì ë ëë§ ë©ëë¤.
- í°í¸ ì¤í¨ 기ê°
-
font faceê° ë¡ëëì§ ìì ê²½ì° ì ì ìì´ì í¸ë ë¡ë ì¤í¨ë¡ ì·¨ê¸íê³ ì ìì ì¸ ëì²´ í°í¸ë¥¼ ë ëë§ í©ëë¤.
| Related at-rule | @font-face |
|---|---|
| ì´ê¸°ê° | auto |
| ê³ì° ê° | as specified |
Syntax
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
Values
auto-
font display ì ëµì ì ì ìì´ì í¸ì ìí´ ì ìë©ëë¤.
block-
font faceì 짧ì ì°¨ë¨ ê¸°ê°ê³¼ 무íëì êµì²´ 기ê°ì ë¶ì¬í©ëë¤.
swap-
font faceì ë§¤ì° ìì ì°¨ë¨ ê¸°ê°ê³¼ 무íëì êµì²´ 기ê°ì ë¶ì¬í©ëë¤.
fallback-
font faceì ë§¤ì° ìì ì°¨ë¨ ê¸°ê°ê³¼ 짧ì êµì²´ 기ê°ì ë¶ì¬í©ëë¤.
optional-
font faceì ë§¤ì° ìì ì°¨ë¨ ê¸°ê°ê³¼ êµì²´ 기ê°ì ë¶ì¬í©ëë¤.
Formal syntax
font-display =
auto |
block |
swap |
fallback |
optional
Examples
@font-face {
font-family: ExampleFont;
src:
url("/path/to/fonts/example-font.woff") format("woff"),
url("/path/to/fonts/example-font.eot") format("embedded-opentype");
font-weight: 400;
font-style: normal;
font-display: fallback;
}
ëª ì¸ì
| Specification |
|---|
| CSS Fonts Module Level 4 # font-display-desc |