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 å±æ§ç¨äºæ§å¶ OpenType åä½ä¸çé«çº§å°å·åè½ã
å°è¯ä¸ä¸
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;
/* 设置 OpenType åè½æ ç¾çå¼ */
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;
å¤æ³¨ï¼Web å¼åè
åºè¯¥å°½å¯è½ç使ç¨ç±»ä¼¼ font-variant è¿æ ·ççæ è®°å±æ§æè
ç¸å
³çéè®°æ è¯å±æ§çï¼ç±»ä¼¼ font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.
该å±æ§æ¯ä¸ä¸ªæ¯è¾ååºå±çåè½æ¥å£ï¼ç¨äºè§£å³ç±äºæ²¡æå ¶ä»æ¹æ³å»è®¿é®å设置 OpenType åä½æäºç¹æ§èæ æ³è§£å³ä¸äºç¹æ®åè½éæ±ã
ç¹å«éè¦æ³¨æçæ¯ï¼è¯¥ CSS å±æ§ä¸åºè¯¥ç¨æ¥å¼å¯å¤§ååæ¯è½¬æ¢ã
| åå§å¼ | normal |
|---|---|
| éç¨å ç´ | ææå
ç´ åææ¬. It also applies to ::first-letter and ::first-line. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
å¼
normal-
ææ¬ä½¿ç¨é»è®¤è®¾ç½®è¿è¡å¸å±ã
<feature-tag-value>-
å¨åç°ææ¬æ¶ï¼OpenType è¦ç´ æ è®°å¼çåè¡¨è¢«ä¼ éå°ææ¬å¸å±å¼æ以å¯ç¨æç¦ç¨åä½ç¹å¾ãæ ç¾å§ç»æ¯ 4 个 ASCII å符ç
<string>ãå¦ææ¯ U + 20 - U + 7E 代ç ç¹èå´ä»¥å¤çå符æå符个æ°ä¸å¯¹ï¼åæ´ä¸ªå±æ§æ æã å¼æ¯ä¸ä¸ªæ£æ´æ°ãä¸¤ä¸ªå ³é®å on å off åå«æ¯ 1 å 0 çåä¹è¯ãå¦ææªè®¾ç½®ä»»ä½å¼ï¼åé»è®¤å¼ä¸º 1ã对äºéå¸å°å OpenType åè½ï¼ä¾å¦ï¼æä½æ¿ä»£ stylistic alternatesï¼ï¼è¯¥å¼æå³çè¦éæ©ç¹å®çåå½¢ï¼å¯¹äºå¸å°å¼ï¼å®æ¯ä¸ä¸ªå¼å ³ã
å½¢å¼è¯æ³
font-feature-settings =
normal |
<feature-tag-value>#
å®ä¾
/* use small-cap alternate glyphs */
.smallcaps {
font-feature-settings: "smcp" on;
}
/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps {
font-feature-settings: "c2sc", "smcp";
}
/* enable historical forms */
.hist {
font-feature-settings: "hist";
}
/* disable common ligatures, usually on by default */
.noligs {
font-feature-settings: "liga" 0;
}
/* enable tabular (monospaced) figures */
td.tabular {
font-feature-settings: "tnum";
}
/* enable automatic fractions */
.fractions {
font-feature-settings: "frac";
}
/* use the second available swash character */
.swash {
font-feature-settings: "swsh" 2;
}
/* enable 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 |
æµè§å¨å ¼å®¹æ§
å ¶ä»åè
- FontFont OpenType User Guide (pdf)
- OpenType Feature Tags å表
- Using the whole font ( -moz è¯æ³æ¯æ§çãå¨ Gecko ä¸ï¼ä½¿ç¨-ms è¯æ³ï¼ä½ä½¿ç¨-moz ).