mozilla
Os seus resultados da pesquisa

    @font-face

    Resumo

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

    Sintaxe

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

    Valores

    <a-remote-font-name> 
    Especifica um nome para a fonte que será usado como valor de font-face na propriedade font.
    <source> 
    URL para a localização remota do arquivo da fonte ou o nome da fonte no computador do usuário na forma local("Nome da Font").
    <weight> 
    Um valor para a espessura da fonte (font weight (en)).
    <style> 
    Um valor para o estilo da fonte (font style (en)).

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

    Formatos de fontes suportados

    • O Gecko 1.9.1 (Firefox 3.5) suporta fontes True Type e OpenType.
    • O Gecko 1.9.2 (Firefox 3.6) adiciona suporte para WOFF (en).

    Exemplos

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

    Ver amostra

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

    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:

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

    Notas

    • 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 HTTP access controls (EN) seja usado para relaxar esta restrição.
    • Nota: O tipo MIME do arquivo especificado não é considerado porque não há tipos MIME definidos parar fontes TrueType e OpenType.
    • Quando o Gecko exibe uma página que usa fontes web, ele inicialmente exibe o texto usando a melhor fonte fallback 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.

    Compatibilidade com navegadores

    Navegador Versão mais antiga Suporte a
    Internet Explorer 4.0 Somente fontes OpenType embutidas
    Firefox (Gecko) 3.5 (1.9.1) Somente fontes TrueType e OpenType
    3.6 (1.9.2) Formato de fonte web aberta (WOFF)
    Opera 10.0 Somente fontes TrueType e OpenType
    Safari (WebKit) 3.1 (525) Somente fontes TrueType e OpenType

    Veja também MSDN Microsoft library @font-face (EN).

    Especificações

    Veja também

    Etiquetas do documento e colaboradores

    Contributors to this page: Verruckt, Leandro Mercês Xavier, teoli
    Última atualização por: teoli,