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.com/css2?family=Montserrat&display=swap";
@import "https://fonts.googleapis.com/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 |
瀏覽器相容性
載入中…