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;

Kerning(字距)定义了字母的分布情况。对于良好地规定了字距的字体,字距特性使得字母分布更为统一,阅读体验更佳。如下图所示,左侧的示例没有应用字距,而右侧使用了:

Example of font-kerning

初始值auto
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
计算值as specified
Animation typediscrete

语法

font-kerning 属性通过以下的关键字进行指定。

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

Formal syntax

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;

规格

规格 状态 注释
CSS Fonts Module Level 3
font-kerning
Candidate Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-kerningChrome Full support 33
Full support 33
No support 29 — 33
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 79Firefox Full support 32
Full support 32
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 20
Full support 20
No support 16 — 20
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4.3
Full support 4.4.3
No support 4.4 — 4.4.3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 33
Full support 33
No support 29 — 33
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 32
Full support 32
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 20
Full support 20
No support 16 — 20
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9
Full support 9
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 2.0
Full support 2.0
No support 1.0 — 2.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参考