font-synthesis-style

基线 2023

新可用

自从 2023 年 3 月,此功能在最新的设备和浏览器版本上都能正常运行。此功能可能无法在较旧的设备或浏览器上运行。

**font-synthesis-style** CSS 属性允许您指定浏览器是否可以在字体系列中缺少斜体字体时合成斜体字体。

通常,使用简写属性 font-synthesis 来控制所有字体合成值会很方便。

语法

css
/* Keyword values */
font-synthesis-style: auto;
font-synthesis-style: none;

/* Global values */
font-synthesis-style: inherit;
font-synthesis-style: initial;
font-synthesis-style: revert;
font-synthesis-style: revert-layer;
font-synthesis-style: unset;

auto

指示如果需要,浏览器可以合成缺少的斜体字体。

none

指示不允许浏览器合成缺少的斜体字体。

正式定义

初始值auto
适用于所有元素和文本。它也适用于 ::first-letter::first-line
继承
计算值如指定
动画类型离散

正式语法

font-synthesis-style = 
auto |
none

示例

禁用斜体字体的合成

此示例显示了在 Montserrat 字体中关闭浏览器合成斜体字体的功能。

HTML

html
<p class="english">
  This is the default <em>oblique typeface</em> and
  <strong>bold typeface</strong>.
</p>

<p class="english no-syn">
  The <em>oblique typeface</em> is turned off here but not the
  <strong>bold typeface</strong>.
</p>

CSS

css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-style: none;
}

结果

规范

规范
CSS 字体模块级别 4
# font-synthesis-style

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅