字体字距 | font-kerning
font-kerningCSS属性存储字体的距离
/* Keyword values */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;字距调整定义字母间距的方式。在字体中, 这个特性使字符间距更均匀, 读起来更愉快。例如,在下面的图像中,左边的示例不使用字距调整,而右边的例子是:

初始值 | auto |
|---|---|
应用于 | all elements. It also applies to ::first-letter and ::first-line. |
继承 | yes |
媒体 | visual |
计算值 | as specified |
Animation type | discrete |
规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
font-kerning属性被指定为下面列出的关键字值之一:
取值
auto浏览器确定是否应该使用字距调整。例如,一些浏览器将禁用小字体的字距调整,因为应用它可能会损害文本的可读性。
normal存储在字体中的字体字距必须被应用。
none存储在字体中的字体字距信息被禁用。
形式语法
auto | normal | none例
HTML
<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;
}JavaScript
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 | Status | Comment |
|---|---|---|
CSS Fonts Module Level 3The definition of 'font-kerning' in that specification. | Candidate Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | 321 | (Yes) | 34 (34)2 | 103 | ? | 7 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 34.0 (34)2 | ? | ? | 7 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com

