首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

字体字距 | font-kerning

font-kerningCSS属性存储字体的距离

代码语言:javascript
复制
/* 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存储在字体中的字体字距信息被禁用。

形式语法

代码语言:javascript
复制
auto | normal | none

HTML

代码语言:javascript
复制
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>

CSS

代码语言:javascript
复制
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

JavaScript

代码语言: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

扫码关注腾讯云开发者

领取腾讯云代金券