font-kerning

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

css
/* Keyword values */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

Kerning(字距)定义了字母的分布情况。对于良好地规定了字距的字体,字距特性使得字母分布更为统一,阅读体验更佳。如下图所示,左侧的示例没有应用字距,而右侧使用了:

Example of font-kerning

初始值auto
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型离散值

语法

font-kerning 属性通过以下的关键字进行指定。

auto

浏览器来决定是否使用字体字距。比如,一些浏览器会在小字体的情况下禁用字距,因为这会使得文本可读性下降。

normal

必须应用字体中的字距信息。

none

禁用字体中的字距信息。

形式语法

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
var input = document.getElementById("input"),
  kern = document.getElementById("kern"),
  nokern = document.getElementById("nokern");

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

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

规范

Specification
CSS Fonts Module Level 4
# font-kerning-prop

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-kerning

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见