字体字距 | font-kerning
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浏览器确定是否应该使用字距调整。例如，一些浏览器将禁用小字体的字距调整，因为应用它可能会损害文本的可读性。
形式语法
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 |
