CSS font-variant-settings屬性用法及代碼示例

font-variant-settings 屬性允許用戶對具有可變特征的字體進行良好的低級控製。用戶可以指定要改變值的字符的字體字母軸名稱。

有兩種形式來指定這個屬性，一種是普通形式，一種是字符串編號。當應用 normal 屬性時，文本將按默認設置布局。此屬性是一種低級機製，旨在讓用戶可以設置可變字體函數。

用法:font-variation-settings 屬性的語法如下所示。

font-variant-settings:normal | small-caps | initial | inherit;

屬性值：

Default_Value: 要使用默認設置，使用的值為 “normal”。
Global_Values:全局值定義為 “inherit”、“initial”、“revert” 和 “unset”。

範例1：下麵是 font-variant-settings 使用值 “normal” 的示例。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        p.normal {
            color:green;
            padding:7px;
            font-weight:bold;
            font-variant:normal;
        }
    </style>
</head>
  
<body>
    <p class="normal">
        Hello, this is GeeksforGeeks!!
    </p>
</body>
  
</html>

輸出：

範例2：下麵是 font-variant-settings 使用值 “small-caps” 的示例。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        p.small {
            color:green;
            padding:12px;
            font-weight:bold;
            font-variant:small-caps;
        }
    </style>
</head>
  
<body>
    <p class="small">
        Hello, this is GeeksforGeeks!!
    </p>
</body>
  
</html>

輸出：

小帽子

支持的瀏覽器：

Chrome
Firefox
Opera
Safari
Edge
IE瀏覽器

相關用法

注：本文由純淨天空篩選整理自cyber_psych0大神的英文原創作品 How to use font-variant-settings property in CSS ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。