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-face/index.html | 189 ++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/pt-br/web/css/@font-face/index.html (limited to 'files/pt-br/web/css/@font-face') diff --git a/files/pt-br/web/css/@font-face/index.html b/files/pt-br/web/css/@font-face/index.html new file mode 100644 index 0000000000..9f60002ff0 --- /dev/null +++ b/files/pt-br/web/css/@font-face/index.html @@ -0,0 +1,189 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

O @font-face CSS at-rule especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário. Se a função local() for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função url() é baixado e usado.

+ +

Ao permitir que os autores forneçam suas próprias fontes, @font-face torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.

+ +

É comum usar url() e local() juntos, para que a cópia instalada da fonte do usuário seja usada, se disponível, voltando ao download de uma cópia da fonte, caso ela não seja encontrada no dispositivo do usuário.

+ +

A regra de CSS @font-face pode ser usada não apenas no nível superior de um CSS, mas também dentro de qualquer CSS conditional-group at-rule.

+ +
@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

Sintaxe

+ +

Descritores

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
Determina como uma fonte é exibida, com base em se e quando é baixada e pronta para uso.
+
{{cssxref("@font-face/font-family", "font-family")}}
+
Especifica um nome que será usado como o valor nominal da fonte para as propriedades da fonte.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
Um valor {{cssxref ("font-stretch")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo, extensão de fonte: font-stretch: 50% 200%;
+
{{cssxref("@font-face/font-style", "font-style")}}
+
Um valor {{cssxref ("font-style")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo font-style: oblique 20deg 50deg;
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
Um valor de {{cssxref ("font-weight")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo font-weight: 100 400;
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
Um valor {{cssxref("font-variant")}}.
+
{{cssxref("font-feature-settings", "font-feature-settings")}}
+
Permite o controle sobre recursos tipográficos avançados em fontes OpenType.
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
Permite o controle de baixo nível sobre as variações de fonte OpenType ou TrueType, especificando os nomes dos quatro eixos das letras dos recursos para variar, juntamente com seus valores de variação.
+
{{cssxref("@font-face/src", "src")}}
+
+

Especifica o recurso que contém os dados da fonte. Pode ser um URL para um local de arquivo de fonte remota ou o nome de uma fonte no computador do usuário.

+ +

Para fornecer ao navegador uma dica sobre o formato de um recurso de fonte - para que ele possa selecionar um adequado - é possível incluir um tipo de formato dentro de uma função format():

+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("truetype");
+ +

Os tipos disponíveis são: "woff", "woff2", "truetype", "opentype", "embedded-opentype", e "svg".

+
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
O intervalo de pontos de código Unicode a serem usados na fonte.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplos

+ +

Este exemplo simplesmente especifica uma fonte para download a ser usada, aplicando-a a todo o corpo do documento:

+ +

Veja este exemplo

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o usuário não tiver essa fonte instalada (dois nomes diferentes são tentados), a fonte para download denominada "MgOpenModernaBold.ttf" será usada:

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

Font MIME Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
FormatoMIME type
TrueTypefont/ttf
OpenTypefont/otf
Web Open File Formatfont/woff
Web Open File Format 2font/woff2
+ +

Notes

+ + + +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Especificação de formato de fonte com novo algoritmo de compactação.
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Especificação de formato
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Definição Inicial
+ +

Compatibilidade do navegador

+ + + +

{{Compat("css.at-rules.font-face")}}

+ +

Veja Também

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