font-synthesis 属性确定浏览器是否应合成字体系列中缺少的粗体、斜体和/或小写字体。
此属性是以下属性的简写:
- font-synthesis-weight
- font-synthesis-style
- font-synthesis-small-caps
可能的值
可能的值将取决于我们如何使用此属性。
- none:表示无需合成粗体、斜体或小写字体。
- weight:表示浏览器可能会合成缺失的粗体字体。
- style:表示浏览器可能会合成缺少的斜体字体。
- small-caps:表示浏览器可能会合成缺失的小写字母字体。
适用于
所有 HTML 元素。
DOM 语法
object.style.fontSynthesis = "none | weight | small-caps style";
CSS font-synthesis - 基本示例
下面是一个示例:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
<style>
p {
margin-bottom: 5px;
border: 2px solid red;
}
.eng {
font-family: "Montserrat", sans-serif;
}
.chi {
font-family: "Ma Shan Zheng";
}
.no-syn {
font-synthesis: none;
}
.syn {
font-synthesis: style weight;
}
</style>
</head>
<body>
<h3>DEFAULT</h3>
<p class="eng">
Supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chi"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
<h3>DISABLED SYNTHESIS</h3>
<p class="eng no-syn">
Do not support <strong>bold</strong> and <em>italic.</em>
</p>
<h3>DISABLED SYNTHESIS</h3>
<p class="chi no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<h3> SYNTHESIS IS ENABLED </h3>
<p class="eng syn">
Supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chi syn"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
</body>
</html>

