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 2020年1月.
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（字距）定义了字母的分布情况。对于良好地规定了字距的字体，字距特性使得字母分布更为统一，阅读体验更佳。如下图所示，左侧的示例没有应用字距，而右侧使用了：
| 初始值 | auto |
|---|---|
| 适用元素 | 所有元素和文本. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 是 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
语法
font-kerning 属性通过以下的关键字进行指定。
值
形式语法
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 |
浏览器兼容性
Loading…