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
廣告