font-synthesis
åºçº¿
广æ³å¯ç¨
*
èª 2022å¹´1æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
font-synthesis CSS å±æ§æ§å¶æµè§å¨å¯ä»¥åæï¼synthesizeï¼åªäºç¼ºå¤±çåä½ï¼ç²ä½ææä½ã
å°è¯ä¸ä¸
font-synthesis: weight style small-caps;
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps;
font-synthesis: position;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<p class="english">
This font does not include <span class="bold">bold</span>,
<span class="italic">italic</span>,
<span class="small-caps">small-caps</span>, and
<span class="sub">subscript</span> or
<span class="sup">superscript</span> variants.
</p>
<p class="chinese">
ä¸ææçé常ä¸è¿ç¨<span class="bold">ç²ä½</span>æ<span class="italic"
>æä½</span
><span class="sub">常ä¸</span><span class="sup">è¿ç¨</span>ã
</p>
</div>
</section>
@font-face {
font-family: Oxygen;
font-style: normal;
font-weight: 400;
src: url("https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2")
format("woff2");
}
/* [108] */
@font-face {
font-family: "Ma Shan Zheng";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.108.woff2")
format("woff2");
}
/* [110] */
@font-face {
font-family: "Ma Shan Zheng";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.110.woff2")
format("woff2");
}
/* [117] */
@font-face {
font-family: "Ma Shan Zheng";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.117.woff2")
format("woff2");
}
/* [118] */
@font-face {
font-family: "Ma Shan Zheng";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.118.woff2")
format("woff2");
}
/* [119] */
@font-face {
font-family: "Ma Shan Zheng";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.119.woff2")
format("woff2");
}
.english {
font-size: 1.2em;
font-family: Oxygen;
}
.chinese {
font-size: 1.2em;
font-family: "Ma Shan Zheng";
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.small-caps {
font-variant: small-caps;
}
.sub {
font-variant: sub;
}
.sup {
font-variant: super;
}
大å¤æ°æ å西æ¹åä½å å«æä½åç²ä½åä½ï¼ä½è®¸å¤æ°é¢ï¼noveltyï¼çåä½ä¸å æ¬è¿äºãç¨äºä¸æãæ¥æãé©æåå ¶ä»è¯æ æåï¼logographic scriptï¼çåä½å¾å¾ä¸å«è¿äºåä½ï¼åæ¶ï¼ä»é»è®¤åä½ä¸çæãåæè¿äºåä½å¯è½ä¼å¦¨ç¢ææ¬çæ读æ§ãå¨è¿äºæ åµä¸ï¼å¯è½æå¥½å ³éæµè§å¨é»è®¤ç font-synthesis åä½åæç¹æ§ã
| åå§å¼ | weight style small-caps position |
|---|---|
| éç¨å ç´ | ææå
ç´ åææ¬. It also applies to ::first-letter and ::first-line. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
è¯æ³
æ¤å±æ§ï¼çå¼ï¼å¯éç¨ä¸åä»»æä¸ç§å½¢å¼ï¼
- å
³é®è¯
none - å
³é®è¯
weightæstyle - å
³é®è¯
weightåstyleã
å±æ§å¼
å½¢å¼åè¯æ³
font-synthesis =
none |
[ weight || style || small-caps || position ]
示ä¾
HTML
html
<em class="syn">Synthesize me! ç«ç´ã</em>
<br />
<em class="no-syn">Don't synthesize me! ç«ç´ã</em>
CSS
css
em {
font-weight: bold;
}
.syn {
font-synthesis: style weight;
}
.no-syn {
font-synthesis: none;
}
ç»æ
è§è
| è§è |
|---|
| CSS Fonts Module Level 4 # font-synthesis |