files/pt-pt/web/css/@font-face/index.html


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

---
title: '@font-face'
slug: Web/CSS/@font-face
translation_of: Web/CSS/@font-face
---
<p>{{ CSSRef() }}</p>

<h2 id="Resumo">Resumo</h2>

<p><code>@font-face </code>permite que autores especifiquem fontes online para exibir texto em suas páginas web. Permitindo autores a proporcionar suas próprias fontes,<code> @font-face </code>elimina a necessidade de depender do limitado número de fontes que os usuários tem instalado em seus computadores.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre>@font-face {
  font-family: &lt;a-remote-font-name&gt;;
  src: &lt;source&gt; [,&lt;source&gt;]*;
  [font-weight: &lt;weight&gt;];
  [font-style: &lt;style&gt;];
}
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt>&lt;a-remote-font-name&gt; </dt>
 <dd>Especifica um nome para a fonte que será usado como valor de <code>font-face</code> na propriedade <code>font</code>.</dd>
 <dt>&lt;source&gt; </dt>
 <dd>URL para a localização remota do arquivo da fonte ou o nome da fonte no computador do usuário na forma <code>local("Nome da Font")</code>.</dd>
 <dt>&lt;weight&gt; </dt>
 <dd>Um valor para a espessura da fonte (<a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">font weight</a> (en)).</dd>
 <dt>&lt;style&gt; </dt>
 <dd>Um valor para o estilo da fonte (<a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">font style</a> (en)).</dd>
</dl>

<p>Você pode especificar uma fonte local no computador do usuário através do nome, usando a sintaxe <code>local()</code>. Se esta fonte não for encontrada, outras fontes serão tentadas até que uma seja encontrada.</p>

<h2 id="Formatos_de_fontes_suportados">Formatos de fontes suportados</h2>

<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
 <li style="margin-bottom: 0.25em;">O Gecko 1.9.1 (Firefox 3.5) suporta fontes True Type e OpenType.</li>
 <li style="margin-bottom: 0.25em;">O Gecko 1.9.2 (Firefox 3.6) adiciona suporte para <a href="/en/About_WOFF" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/About WOFF">WOFF</a> (en).</li>
</ul>

<h2 id="Exemplos">Exemplos</h2>

<p>Este simples exemplo especifica uma fonte baixável para uso, aplicando-a ao corpo do documento.</p>

<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">Ver amostra</a></p>

<pre>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Web Font Sample&lt;/title&gt;
  &lt;style type="text/css" media="screen, print"&gt;
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  This is Bitstream Vera Serif Bold.
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Neste exemplo, a cópia local do usuário de "Helvetica Neue Bold" é usada; se o usuário não possuir a fonte instalada (dois diferentes nomes são tentados), então, a fonte baixável, chamada "MgOpenModernaBold.ttf" é usada em seu lugar:</p>

<pre class="brush: css">@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
</pre>

<h2 id="Notas">Notas</h2>

<ul>
 <li>No Gecko, fontes web estão sujeitas à mesma restrição de domínio (arquivos de fontes precisam estar no mesmo domínio da página que os está utilizando), a menos que <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access controls</a> (EN) seja usado para relaxar esta restrição.</li>
 <li>
  <div class="note"><strong>Nota:</strong> O tipo MIME do arquivo especificado não é considerado porque não há tipos MIME definidos parar fontes TrueType e OpenType.</div>
 </li>
 <li>Quando o Gecko exibe uma página que usa fontes web, ele inicialmente exibe o texto usando a melhor fonte <strong>fallback</strong> CSS disponível no computador do usuário enquanto aguarda o fim do download da fonte web. Conforme as fontes web são baixadas, o Gecko atualiza o texto que use essa fonte. Isto permite que o usuário leia o texto da página mais rapidamente.</li>
</ul>

<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Versão mais antiga</th>
   <th>Suporte a</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td><strong>4.0</strong></td>
   <td>Somente fontes OpenType embutidas</td>
  </tr>
  <tr>
   <td rowspan="2">Firefox (Gecko)</td>
   <td><strong>3.5</strong> (1.9.1)</td>
   <td>Somente fontes TrueType e OpenType</td>
  </tr>
  <tr>
   <td><strong>3.6</strong> (1.9.2)</td>
   <td>Formato de fonte web aberta (WOFF)</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td><strong>10.0</strong></td>
   <td>Somente fontes TrueType e OpenType</td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td><strong>3.1</strong> (525)</td>
   <td>Somente fontes TrueType e OpenType</td>
  </tr>
 </tbody>
</table>

<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Veja também <a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">MSDN Microsoft library @font-face</a> (EN).</p>

<h2 id="Especificações">Especificações</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> 12/05/1998 - Obsoleto</li>
 <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-resources" title="http://www.w3.org/TR/css3-fonts/#font-resources">CSS 3 Fonts</a> 2009 - Rascunho em trabalho</li>
 <li><a class="external" href="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html" title="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html">WOFF file format specification</a> - Rascunho</li>
</ul>

<h2 id="Veja_também">Veja também</h2>

<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
 <li style="margin-bottom: 0.25em;"><a class="external" href="http://www.fontsquirrel.com/fontface/generator" title="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a> (en)</li>
 <li style="margin-bottom: 0.25em;"><a href="/en/About_WOFF" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/About WOFF">About WOFF</a> (en)</li>
 <li style="margin-bottom: 0.25em;"><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/" title="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face </a>(en)</li>
 <li style="margin-bottom: 0.25em;"><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a> (en)</li>
 <li style="margin-bottom: 0.25em;"><a class="external" href="http://opentype.info/demo/webfontdemo.html" title="http://opentype.info/demo/webfontdemo.html">10 Great Free Fonts for @font-face embedding</a> (en)</li>
</ul>