1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: font-kerning
slug: Web/CSS/font-kerning
translation_of: Web/CSS/font-kerning
---
<div>{{CSSRef}}</div>
<p>A propriedade CSS <strong><code>font-kerning</code></strong> controla o o uso da informação de kerning, que é, o controle de como as letras serão espaçadas. A informação de kerning é armazenada na fonte, e se a fonte é <em>well-kerned</em>, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.</p>
<p><img alt="Example of font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p>
<pre class="brush:css no-line-numbers">font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code>auto</code></dt>
<dd>This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.</dd>
<dt><code>normal</code></dt>
<dd>This keyword requires kerning to be applied.</dd>
<dt><code>none</code></dt>
<dd>This keyword prevents the browser from using the kerning information stored in the font.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<pre class="brush:css">p {
font-kerning: none;
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>32<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("34")}}<sup>[2]</sup></td>
<td>10<sup>[3]</sup></td>
<td>{{ CompatUnknown() }}</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("34")}}<sup>[2]</sup></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Requires prefix -webkit-font-kerning. First version supporting this property is not known.</p>
<p>[2] Experimental implementation was available since Gecko 24. It was governed by the preference <code>layout.css.font-features.enabled</code> defaulting to <code>true</code> on Nightly and Aurora only.</p>
<p>[3] OpenType layout features might be supported using font-feature-settings property, however individual font-kerning property is not supported.</p>
<h2 id="Kerning_Demo" name="Kerning_Demo">Kerning Demo</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html"><div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea></pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">#nokern, #kern {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}</pre>
<h3 id="JS_Content">JS Content</h3>
<pre class="brush: 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;
</pre>
<p>{{ EmbedLiveSample('Kerning_Demo') }}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}.</li>
</ul>
|
