CSS - font-synthesis 属性_CSS 菜鸟教程

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>

<< CSS - font-style 属性 CSS - font-variant 属性 >>