diff options
Diffstat (limited to 'files/pt-pt/web/css/@font-face/index.html')
| -rw-r--r-- | files/pt-pt/web/css/@font-face/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/@font-face/index.html b/files/pt-pt/web/css/@font-face/index.html new file mode 100644 index 0000000000..8a150d736c --- /dev/null +++ b/files/pt-pt/web/css/@font-face/index.html @@ -0,0 +1,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: <a-remote-font-name>; + src: <source> [,<source>]*; + [font-weight: <weight>]; + [font-style: <style>]; +} +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a-remote-font-name> </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><source> </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><weight> </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><style> </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><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @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 } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</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> |