font-variant-numeric
åºçº¿
广æ³å¯ç¨
èª 2020å¹´1æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
font-variant-numeric CSS å±æ§æ§å¶æ°åãåæ°ååºå·æ è®°çæ¿ä»£åå½¢ç使ç¨ã
å°è¯ä¸ä¸
font-variant-numeric: normal;
font-variant-numeric: slashed-zero;
font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
<section id="default-example">
<div id="example-element">
<table>
<tr>
<td><span class="tabular">0</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("/proxy/developer.mozilla.org/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;
}
è¯æ³
css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;
/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;
æ¤å±æ§ä»¥ä»¥ä¸ä¸¤ç§æ¹å¼ä¹ä¸æå®ï¼
- å
³é®åå¼
normal - æä¸åçä¸ä¸ªæå¤ä¸ªå ¶ä»å¼ï¼æä»»æ顺åºæåå¹¶ä»¥ç©ºæ ¼åéã
å¼
normal-
ä¸åç¹æ§åä¸å¯ç¨ã
ordinal-
å¯ç¨åºæ°å½¢å¼æ¾ç¤ºã对åºå·æ 记强å¶å¯ç¨ç¹æ®åå½¢ï¼å¦è±æä¸ç 1stï¼2ndï¼3rdï¼4thï¼æ大å©æä¸ç 1aãçåäº OpenType ç¹æ§
ordnã slashed-zero-
å¯ç¨åºåé¶æ¾ç¤ºã强å¶ä½¿ç¨å¸¦æææ ç 0ï¼å¸¸ç¨äºåºå O å 0ãçåäº OpenType ç¹æ§ zeroã
- <numeric-figure-values>
-
ä¸åå¼ç¨äºæ§å¶æ°åæ ·å¼ï¼å¯ç¨å¼å¦ä¸ï¼
lining-numså¯ç¨å 衬æ°åæ¾ç¤ºã使æ°åå ¨é¨å¯¹é½å°åºçº¿ãçåäº OpenType ç¹æ§lnumãoldstyle-numså¯ç¨æ§å¼æ°åæ¾ç¤ºãé¨åæ°åå¦ 3ã4ã7ã9 ä¼æä¸æ²ãçåäº OpenType ç¹æ§onumã
- <numeric-spacing-values>
-
ä¸åå¼ç¨äºæ§å¶æ°å宽度ï¼å¯ç¨å¼å¦ä¸ï¼
proportional-numså¯ç¨æ¯ä¾æ°åæ¾ç¤ºã使æ°ååæåºäºåå½¢æ¬èº«å½¢ç¶ä¸çç¹å®å®½åº¦è¡¨ç°ãçåäº OpenType ç¹æ§pnumãtabular-numså¯ç¨è¡¨æ ¼æ°åæ¾ç¤ºã使æ°åç宽ï¼æäºåè¡¨æ ¼é£æ ·å¯¹é½ãçåäº OpenType ç¹æ§tnumã
- <numeric-fraction-values>
-
ä¸åå¼ç¨äºæ§å¶åæ°åå½¢ï¼å¯ç¨å¼å¦ä¸ï¼
diagonal-fractionså¯ç¨æè§åæ°æ¾ç¤ºã使ååååæ¯åæåä¸æ åï¼å¹¶ç¨åé¿çæ线åéãçåäº OpenType ç¹æ§ fracãstacked-fractionså¯ç¨æ ååæ°æ¾ç¤ºã使ååå¨ä¸ï¼åæ¯å¨ä¸ï¼å¹¶ç¨æ°´å¹³çº¿åéãçåäº OpenType ç¹æ§ afrcã
å½¢å¼å®ä¹
| åå§å¼ | normal |
|---|---|
| éç¨å ç´ | ææå
ç´ åææ¬. It also applies to ::first-letter and ::first-line. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
å½¢å¼è¯æ³
font-variant-numeric =
normal |
[ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
<numeric-figure-values> =
lining-nums |
oldstyle-nums
<numeric-spacing-values> =
proportional-nums |
tabular-nums
<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions
示ä¾
设置åºæ°å½¢å¼
html
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
css
@font-face {
font-family: "Source Sans Pro";
src: url("/proxy/mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
format("opentype");
font-weight: 400;
font-style: normal;
}
.ordinal {
font-family: "Source Sans Pro";
font-size: 2rem;
font-variant-numeric: ordinal;
}
è§è
| è§è |
|---|
| CSS Fonts Module Level 4 # font-variant-numeric-prop |