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.