font-synthesis
Baseline 广泛可用 *
font-synthesis 简写 CSS 属性允许你指定当指定的字体系列中缺少粗体、斜体、小型大写字母和/或下标与上标字形时，浏览器是否可以合成它们。
试一试
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: normal;
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: normal;
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: normal;
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: normal;
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: normal;
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: normal;
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", sans-serif;
}
.chinese {
font-size: 1.2em;
font-family: "Ma Shan Zheng", cursive;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.small-caps {
font-variant: small-caps;
}
.sub {
font-variant: sub;
}
.sup {
font-variant: super;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
css
/* none or one or more of the other keyword values */
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: position;
font-synthesis: small-caps style; /* property values can be in any order */
font-synthesis: style small-caps weight position; /* property values can be in any order */
/* Global values */
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: revert-layer;
font-synthesis: unset;
值
none-
表示浏览器不得合成粗体、斜体或小型大写字母字形。
weight-
表示如果需要，浏览器可以合成缺失的粗体字形。
style-
表示如果需要，浏览器可以合成斜体字形。
small-caps-
表示如果需要，浏览器可以合成小型大写字母字形。
position-
表示当使用
font-variant-position时，如果需要，浏览器可以合成下标和上标字形。
描述
大多数标准西方字体都包含斜体和粗体变体，一些字体包含小型大写字母和下标/上标变体。然而，许多字体没有。用于中文、日文、韩文和其他表意文字的字体通常不包含这些变体，合成它们可能会影响可读性或改变文本的含义。在这些情况下，可能需要关闭浏览器的默认字体合成功能。
例如，使用 :lang() 伪类，你可以禁用浏览器为某种语言（在此例中为阿拉伯语）合成粗体和倾斜字符。
css
*:lang(ar) {
font-synthesis: none;
}
下表显示了简写 font-synthesis 属性的值如何映射到其组成的长写属性。
| font-synthesis 值 | font-synthesis-weight 值 | font-synthesis-style 值 | font-synthesis-small-caps 值 | font-synthesis-position 值 |
|---|---|---|---|---|
none |
none |
none |
none |
none |
weight |
auto |
none |
none |
none |
style |
none |
auto |
none |
none |
small-caps |
none |
none |
auto |
none |
position |
none |
none |
none |
auto |
weight style |
auto |
auto |
none |
none |
weight small-caps |
auto |
none |
auto |
none |
weight position |
auto |
none |
none |
auto |
style small-caps |
none |
auto |
auto |
none |
style position |
none |
auto |
none |
auto |
weight style small-caps |
auto |
auto |
auto |
none |
weight style position |
auto |
auto |
none |
auto |
weight small-caps position |
auto |
none |
auto |
auto |
style small-caps position |
none |
auto |
auto |
auto |
weight style small-caps position |
auto |
auto |
auto |
auto |
正式定义
| 初始值 | weight style small-caps position |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
font-synthesis =
none |
[ weight || style || small-caps || position ]
示例
禁用字体合成
此示例演示了浏览器的默认字体合成行为，并将其与关闭合成行为进行比较。请注意，该示例使用两种导入的字体来演示此行为。你可能无法在操作系统上默认可用的字体上复制关闭字体合成的功能。
HTML
html
<pre> DEFAULT </pre>
<p class="english">
This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />
<pre> SYNTHESIS IS DISABLED </pre>
<p class="english no-syn">
This font supports <strong>bold</strong> and <em>italic.</em>
</p>
<p class="chinese no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />
<pre> SYNTHESIS IS ENABLED </pre>
<p class="english">
This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
CSS
css
@import "https://fonts.googleapis.ac.cn/css2?family=Montserrat&display=swap";
@import "https://fonts.googleapis.ac.cn/css2?family=Ma+Shan+Zheng&display=swap";
.english {
font-family: "Montserrat", sans-serif;
}
.chinese {
font-family: "Ma Shan Zheng", cursive;
}
.no-syn {
font-synthesis: none;
}
.syn {
font-synthesis: style weight;
}
结果
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-synthesis |
浏览器兼容性
加载中…