font-feature-settings
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2017ë 4ì.
font-feature-settings CSS ìì±ì ì¤ííì
í°í¸ì ë¤ìí ì¤ííì
í¼ì²ë¥¼ ì¤ì í©ëë¤.
ìëí´ ë³´ê¸°
font-feature-settings: normal;
font-feature-settings: "liga" 0;
font-feature-settings: "tnum";
font-feature-settings: "smcp", "zero";
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
<table>
<tr>
<td><span class="tabular">0O</span></td>
</tr>
<tr>
<td><span class="tabular">3.14</span></td>
</tr>
<tr>
<td><span class="tabular">2.71</span></td>
</tr>
</table>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
#example-element table {
margin-left: auto;
margin-right: auto;
}
.tabular {
border: 1px solid;
}
문ë²
/* ê¸°ë³¸ê° ì¬ì© */
font-feature-settings: normal;
/* ì¤ííì
í¼ì² íê·¸ì ëí´ ê° ì¤ì */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
"smcp",
"swsh" 2;
/* ì ì ê° ì¬ì© */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;
ê°ë¥íë¤ë©´ ë¨ì¶ ìì±ì¸ font-variant ìì±ì ì¬ì©íê±°ë, ê°ê°ì í¼ì²ì ì°ê´ë font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric, font-variant-position ë±ì ì¬ì©íë ê²ì´ font-feature-settings를 ì§ì ì¬ì©íë ê²ì ë¹í´ ë í¨ì¨ì ì´ê³ , ì측 ê°ë¥íê² ëìíë©° ì´í´í기ë ì½ìµëë¤.
ì´ë font-feature-settingsë ìë ìì ë문ì(Small caps)ì ê°ì´ ì ê·¼í ì ìë ë¤ë¥¸ ë°©ë²ì´ ìë ì¤ííì
í¼ì²ë¥¼ ì ì´í기 ìí´ ë§ë¤ì´ì§ ì ìì¤ì 기ë¥ì´ê¸° ë문ì
ëë¤.
ê°
-
normal- : 기본ê°ì ì´ì©íì¬ í ì¤í¸ë¥¼ íìí©ëë¤.
-
<feature-tag-value>- : í
ì¤í¸ë¥¼ ë ëë§í ë, ì¤ííì
í¼ì²ë¥¼ íì±ííê±°ë ë¹íì±íí기 ìí´ í¼ì² íê·¸ 목ë¡ì ë ëë§ ìì§ì ì ë¬í©ëë¤. í¼ì² íê·¸ë 4ê°ì ASCII 문ìë¡ ì´ë£¨ì´ì§
<string>ì´ì´ì¼ í©ëë¤. ë§ì½ íê·¸ê° ë¤ ê¸ìë³´ë¤ ì§§ê±°ë, ì ëì½ëU+20âU+7Eë²ì ë°ê¹¥ì ìë 문ì를 í¬í¨íë¤ë©´ ìì± ì ì²´ê° ë¬´í¨ì²ë¦¬ë©ëë¤.
ê°ì ìì ì ì ê°ì ê°ì§ëë¤. ê°ê°
1,0ê³¼ ê°ì ì미를 ê°ì§ë í¤ìëonê³¼offë ì¬ì©í ì ììµëë¤. ìë¬´ë° ê°ì´ ì¤ì ëì§ ììë¤ë©´ 기본ê°ì1ì ëë¤. stylistic alternatesì ê°ì´ Boolean íì ì´ ìë ì¤ííì í¼ì²ì ê²½ì°, ê°ì ì íëì´ì¼ íë ê¸ë¦¬í(ê¸ì)를 ì미í©ëë¤. Boolean íì ì¸ ê²½ì°ìë ì¤ìì¹ë¼ê³ ìê°íìë©´ ë©ëë¤. - : í
ì¤í¸ë¥¼ ë ëë§í ë, ì¤ííì
í¼ì²ë¥¼ íì±ííê±°ë ë¹íì±íí기 ìí´ í¼ì² íê·¸ 목ë¡ì ë ëë§ ìì§ì ì ë¬í©ëë¤. í¼ì² íê·¸ë 4ê°ì ASCII 문ìë¡ ì´ë£¨ì´ì§
Formal definition
| ì´ê¸°ê° | normal |
|---|---|
| ì ì©ëì | all elements and text. It also applies to ::first-letter and ::first-line. |
| ìì | yes |
| ê³ì° ê° | as specified |
| Animation type | discrete |
Formal syntax
font-feature-settings =
normal |
<feature-tag-value>#
<feature-tag-value> =
<opentype-tag> [ <integer [0,â]> | on | off ]?
<opentype-tag> =
<string>
<integer> =
<number-token>
ìì
>ë¤ìí ì¤ííì í¼ì² íì±í
/* ìì ë문ì(small-caps) ëì²´ ê¸ë¦¬í를 ì¬ì©í©ëë¤. */
.smallcaps {
font-feature-settings: "smcp" on;
}
/* ë문ìì ì문ì를 모ë ìì ë문ìë¡ ë³íí©ëë¤.(문ì¥ë¶í¸ë ìí¥ì ë°ìµëë¤.)*/
.allsmallcaps {
font-feature-settings: "c2sc", "smcp";
}
/* ì문 ë문ì "O"ì 구ë¶í기 ìí´ ëê°ì ì´ ê·¸ë ¤ì§ ì«ì 0ì ì¬ì©í©ëë¤. */
.nicezero {
font-feature-settings: "zero";
}
/* 'ìì¬ì ì¸' íí를 ì¬ì©í기 ìí´ 'hist' í¼ì²ë¥¼ íì±íí©ëë¤. */
.hist {
font-feature-settings: "hist";
}
/* íì¤í©ì(common ligatures)를 ë¹íì±í í©ëë¤. 기본ê°ì íì± ìíì
ëë¤. */
.noligs {
font-feature-settings: "liga" 0;
}
/* ê³ ì í ì«ì(tabular figures)를 ì¬ì©í©ëë¤. */
td.tabular {
font-feature-settings: "tnum";
}
/* ìë ë¶ì ì
ë ¥ì íì±íí©ëë¤. */
.fractions {
font-feature-settings: "frac";
}
/* ê°ë¥í swash 문ì ì¤ ëë²ì§¸ë¥¼ ì¬ì©í©ëë¤. */
.swash {
font-feature-settings: "swsh" 2;
}
/* ì¤íì¼ ì¸í¸(stylistic set) 7ë²ì ì¬ì©í©ëë¤. */
.fancystyle {
font-family: Gabriola; /* available on Windows 7, and on Mac OS */
font-feature-settings: "ss07";
}
ëª ì¸ì
| Specification |
|---|
| CSS Fonts Module Level 4 > # font-feature-settings-prop > |
ë¸ë¼ì°ì í¸íì±
See also
font-displayfont-familyfont-stretchfont-stylefont-weightfont-variantfont-variation-settingssrcunicode-range- OpenType Feature Tags list
- Using the whole font
(Note: The
-mozsyntax is the old one. On Gecko, use the-mssyntax but with-moz.)