font-kerning
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´1æâ©.
font-kerning CSS å±æ§è®¾ç½®æ¯å¦ä½¿ç¨åä½ä¸å¨åçåè·ä¿¡æ¯ã
css
/* Keyword values */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;
Kerningï¼åè·ï¼å®ä¹äºåæ¯çåå¸æ åµã对äºè¯å¥½å°è§å®äºåè·çåä½ï¼åè·ç¹æ§ä½¿å¾åæ¯åå¸æ´ä¸ºç»ä¸ï¼é 读ä½éªæ´ä½³ãå¦ä¸å¾æ示ï¼å·¦ä¾§ç示ä¾æ²¡æåºç¨åè·ï¼èå³ä¾§ä½¿ç¨äºï¼
| åå§å¼ | auto |
|---|---|
| éç¨å ç´ | ææå
ç´ åææ¬. It also applies to ::first-letter and ::first-line. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
è¯æ³
font-kerning å±æ§éè¿ä»¥ä¸çå
³é®åè¿è¡æå®ã
å¼
å½¢å¼è¯æ³
font-kerning =
auto |
normal |
none
示ä¾
HTML
html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
CSS
css
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
js
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 |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |