font-synthesis CSS 属性控制浏览器可以合成(synthesize)哪些缺失的字体,粗体或斜体。
{{InteractiveExample("CSS Demo: font-synthesis")}}
```css interactive-example-choice font-synthesis: weight style small-caps;
```css interactive-example-choice
font-synthesis: none;
```css interactive-example-choice font-synthesis: weight;
```css interactive-example-choice
font-synthesis: style;
```css interactive-example-choice font-synthesis: small-caps;
```css interactive-example-choice
font-synthesis: position;
```html interactive-example
This font does not include bold,
italic,
small-caps, and
subscript or
superscript variants.
中文排版通常不运用粗体或<span class="italic" 斜体</span
常不运用。
```css interactive-example
@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 字体合成特性。
{{cssinfo}}
语法
此属性(的值)可采用下列任意一种形式:
- 关键词
none - 关键词
weight或style - 关键词
weight和style。
属性值
none- : 此关键词表示不合成粗体字型(typeface)或斜体字型。
weight- : 此关键词表示,如果需要的话,可以合成粗体字型。
style- : 此关键词表示,如果需要的话,可以合成斜体字型。
形式化语法
{{csssyntax}}
示例
HTML
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>
CSS
em {
font-weight: bold;
}
.syn {
font-synthesis: style weight;
}
.no-syn {
font-synthesis: none;
}
结果
{{ EmbedLiveSample('示例', '', '50') }}