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 ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。