font-kerning

The font-kerning CSS 属性设置是否使用字体中存储的字距信息。

试试

字距调整定义了字母之间的间距。在字距调整良好的字体中，此功能使字符间距比其他情况下更均匀且更易读。

例如，在下图中，左侧的示例没有使用字距调整，而右侧的示例使用了字距调整

Example of font-kerning

语法

css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;

值

auto

浏览器决定是否应该使用字体字距调整。例如，一些浏览器会在小字体上禁用字距调整，因为应用它可能会影响文本的可读性。

normal

必须应用字体中存储的字体字距调整信息。

none

字体中存储的字体字距调整信息被禁用。

正式定义

初始值auto
应用于所有元素和文本。它也应用于 ::first-letter 和 ::first-line。
继承是
计算值如指定
动画类型离散

正式语法

font-kerning = 
  auto    |
  normal  |
  none

示例

启用和禁用字距调整

HTML

html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>

CSS

css
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

JavaScript

js
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const nokern = document.getElementById("nokern");

input.addEventListener("keyup", () => {
  kern.textContent = input.value; /* Update content */
  nokern.textContent = input.value;
});

kern.textContent = input.value; /* Initialize content */
nokern.textContent = input.value;

规范

规范
CSS Fonts Module Level 4
# font-kerning-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见