CSS参考手册
字体 | Fonts
字体字距 | font-kerning
font-kerning
CSS属性存储字体的距离
/* 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 |
字体 | Fonts相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。