CSS - font-kerning 属性



CSS font-kerning 属性控制字体中字距调整信息的用法。字距调整指的是调整特定字符对之间的间距以提高可读性和视觉效果。并非所有字体都包含字距调整数据。

语法

font-kerning: auto | normal | none;

属性值

描述
auto 浏览器决定是否应用字体字距调整。默认值。
normal 必须使用存储在字体中的字体字距调整信息。
none 禁用存储在字体中的字体字距调整信息。

CSS 字体字距调整属性示例

以下示例使用不同的值解释了font-kerning 属性。

使用 none 值的字体字距调整属性

要禁用字体的字距调整属性,我们使用none 值。这将阻止应用为字体中特定字符对定义的任何字距调整,从而导致字符之间间距一致。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .kerning-disabled {
            font-family: 'Times New Roman', serif;
            font-size: 56px;
            font-kerning: none;
        }
    </style>
</head>

<body>
    <h2>
        CSS font-kerning property
    </h2>
    <p>
    <strong>
        font-kerning:
    </strong> 
        none (notice the space difference
        between these characters)
    </p>
    <p class="kerning-disabled">
        AV To Wa
    </p>
</body>

</html>

使用 normal 值的字体字距调整属性

要使用字体的字距调整属性,我们使用normal 值。这确保浏览器使用字体的内置字距调整信息,应用为特定字符对定义的间距调整,以获得更好的视觉和谐。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .kerning-enabled {
            font-family: 'Times New Roman', serif;
            font-size: 56px;
            font-kerning: normal;
        }
    </style>
</head>

<body>
    <h2>
        CSS font-kerning property
    </h2>
    <p>
    <strong>
        font-kerning:
    </strong> 
        normal (kerning property 
        of the font is used)
    </p>
    <p class="kerning-enabled">
        AV To Wa
    </p>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
font-kerning 33.0 79.0 34.0 9.1 20.1
css_properties_reference.htm
广告