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> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41