CSS @font-face - font-style



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

font-style 描述符专门用于指定字体样式。这些字体对应于同一字体家族的不同样式。

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

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

可能的值

font-style CSS 描述符可以具有以下值之一

  • normal:指定字体系列的正常版本。

  • italic:指定正常字体的斜体版本。

  • oblique:指定正常字体的倾斜版本。

  • oblique 带角度:具有指定文本倾斜度的角度的倾斜样式。

语法

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

CSS font-style - 斜体值

指定斜体字体样式

以下示例演示了在下载的字体系列的@font-face @规则上使用font-style 描述符。

<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-Italic.ttf”的字体文件从 Brygada1918 系列下载。

  • @font-face @规则由字体系列名称f1font-style: italic 声明。

  • 确保字体支持其斜体形式。

  • 根据font-style 的值,h1 元素中的文本显示为斜体,而 h2 元素中的文本不显示为斜体。

广告

© . All rights reserved.