CSS @font-face - font-style



CSS 描述符 font-style 允许作者在 @font-face 规则中为指定字体指定样式。

描述符 font-style 专门用于指定字体 face'e 样式。这些字体对应于同一字体系列的不同样式。

描述符 font-style 的值与其对应的 font-style 属性的值相同。

不应将描述符 font-style font-style 属性混淆。描述符 font-style 仅与 @font-face 规则一起使用,以显式选择该规则的斜体或倾斜字体。然后,在样式表中的其他位置使用 font-style 属性,将该 font-style 应用于元素。

可能的值

字体样式 CSS 描述符可以具有以下值之一:

  • normal:指定字体系列的正常版本。
  • italic:指定普通字体的斜体版本。
  • oblique:指定普通字体的倾斜版本。
  • oblique with angle:带有角度的倾斜样式,用于指定文本的倾斜度。

语法


 font-style = "normal | italic | oblique [ <angle>{1, 2} ]";

CSS font-style - 斜体值 指定斜体字体样式

以下示例演示了在下载的字体系列的 @font-face at-rule 上使用字体样式描述符。


<html>
<head>	
<style>
	 @font-face {
	 	 	 font-family: "f1";
	 	 	 src: url("font/Brygada1918-Italic.ttf");
	 	 	 font-style: italic;
	 	 	 }

	 	h1 {
	 	 	 font-family: "f1", serif;
	 	}
</style>
</head>
<body>
	 	<h1>
	 	 	 Testing font-style.
	 	</h1>
	 		
	 	 <h2>
	 	 	 Testing font-style.
	 	 </h2>
</body>
</html>

在上面的示例中:

  • 从Brygada1918家族下载了一个名为“Brygada1918-Italic.ttf”的字体文件。
  • @font-face 规则由 font-family 名称 f1 和 font-style: italic 声明。
  • 确保字体支持其斜体形式。
  • 根据 font-style 的值,h1 元素中的文本显示为斜体,而 h2 元素中的文本不显示为斜体。