From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/font-kerning/index.html | 166 ++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/pt-br/web/css/font-kerning/index.html (limited to 'files/pt-br/web/css/font-kerning/index.html') diff --git a/files/pt-br/web/css/font-kerning/index.html b/files/pt-br/web/css/font-kerning/index.html new file mode 100644 index 0000000000..59005e877f --- /dev/null +++ b/files/pt-br/web/css/font-kerning/index.html @@ -0,0 +1,166 @@ +--- +title: font-kerning +slug: Web/CSS/font-kerning +translation_of: Web/CSS/font-kerning +--- +
{{CSSRef}}
+ +

A propriedade CSS font-kerning 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 é well-kerned, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.

+ +

Example of font-kerning

+ +
font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* Global values */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
auto
+
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.
+
normal
+
This keyword requires kerning to be applied.
+
none
+
This keyword prevents the browser from using the kerning information stored in the font.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
p {
+  font-kerning: none;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser Compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support32[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}[2]10[3]{{ CompatUnknown() }}7
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}[2]{{ CompatUnknown() }}{{ CompatUnknown() }}7
+
+ +

[1] Requires prefix -webkit-font-kerning. First version supporting this property is not known.

+ +

[2] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

+ +

[3] OpenType layout features might be supported using font-feature-settings property, however individual font-kerning property is not supported.

+ +

Kerning Demo

+ +

HTML Content

+ +
<div id="kern"></div>
+<div id="nokern"></div>
+<textarea id="input">AV T. ij</textarea>
+ +

CSS Content

+ +
#nokern, #kern {
+  font-size: 2rem;
+  font-family: serif;
+}
+#nokern {
+  font-kerning: none;
+}
+#kern {
+  font-kerning: normal;
+}
+ +

JS Content

+ +
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;
+
+ +

{{ EmbedLiveSample('Kerning_Demo') }}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf