font-kerning

版本： CSS3

font-kerning CSS 属性设置是否使用字体中储存的字距信息。Kerning（字距）定义了字母的分布情况。对于良好地规定了字距的字体，字距特性使得字母分布更为统一，阅读体验更佳。

示例

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

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

浏览器支持

IE不支持 font-kerning 。其余的浏览器都支持 font-kerning

语法

font-kerning : auto | normal | none

取值

• auto ：浏览器来决定是否使用字体字距。比如，一些浏览器会在小字体的情况下禁用字距，因为这会使得文本可读性下降。
• normal ：必须应用字体中的字距信息。
• none ：禁用字体中的字距信息。

实例

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

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

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

//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;