CSS @font-face - font-family

CSS 描述符font-family用於設定在@font-face規則中指定的字型的字體系列。

font-family可以設定字型的任何名稱，這將覆蓋底層字型資料中給出的任何名稱。使用font-family屬性為元素設定樣式時，提供的名稱將與特定的@font-face匹配。

不要將font-family描述符與font-family屬性混淆。font-family描述符僅與@font-face@規則一起使用來命名字型。font-family屬性隨後在樣式表中的其他地方用於引用該字型。

可能的值

CSS 描述符font-family只取一個值，如下所示

<family-name>: 定義字體系列的名稱。

語法

font-family: <font-family>;

宣告font-family的幾種方法如下

/* <string> value */
font-family: "sample font";

/* <custom-ident> value */
font-family: sampleFont;

CSS font-family - 字串值

以下示例演示瞭如何使用font-family描述符設定字體系列的名稱，其中值作為<string>值傳遞

<html>
<head> 
<style>
   /* font-family is used to set a name as a string value */
   @font-face {
      font-family: "sample font";
      src: local(Arial Bold);
      descent-override: 70%;
   }

   h1.with-override {
      font-family: "sample font"; 
   }

   h1 {
      border: 2px solid red;
      width: max-content;
   }
</style>
</head>
<body>
   <h1>No Descent Override</h1> 
   <h1 class="with-override">Descent Override Applied</h1>
</body>
</html>

CSS font-family - custom-ident 值

以下示例演示瞭如何使用font-family描述符設定字體系列的名稱，其中值作為<custom-ident>值傳遞

<html>
<head> 
<style>
   /* font-family is used to set a name as a <custom-ident> value */
   @font-face {
      font-family: sampleFont;
      src: local(Arial Bold);
      descent-override: 70%;
   }

   h1.with-override {
      font-family: sampleFont; 
   }

   h1 {
      border: 2px solid red;
      width: max-content;
   }
</style>
</head>
<body>
   <h1>No Descent Override</h1> 
   <h1 class="with-override">Descent Override Applied</h1>
</body>
</html>

列印頁面