试一试
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
“We took Tracy to see ‘THE WATERFALL’ in W. Virginia.”
</div>
</section>
section {
font-family: serif;
}
字偶间距 影响字母间的间距。在经过良好调整字偶间距的字体中，此功能通过减少某些字符组合之间的空白，使字符间距更均匀、更易于阅读。
例如，在下面的图片中，左侧的示例不使用字偶间距，而右侧的示例使用字偶间距。
语法
css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;
值
正式定义
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
font-kerning =
auto |
normal |
none
示例
启用和禁用字偶间距
HTML
html
<div id="kern"></div>
<div id="no-kern"></div>
<textarea id="input">AV T. ij</textarea>
CSS
css
div {
font-size: 2rem;
font-family: serif;
}
#no-kern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
js
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const noKern = document.getElementById("no-kern");
input.addEventListener("keyup", () => {
kern.textContent = input.value; /* Update content */
noKern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
noKern.textContent = input.value;
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-kerning-prop |
浏览器兼容性
加载中…