font-synthesis 属性决定浏览器是否应合成 font-family 中缺少的粗体、斜体和/或小型大写字体。
此属性是以下属性:
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 字体合成: 基本示例
这里是一个示例:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=蒙特塞拉特岛&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=马+单+郑&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>