Tableless - Desenvolvimento inteligente com Padrões Web

10/08/2007
Artigos

@font-face

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário. Estamos acostumados a usar (os designers que o digam) um pacote de fontes muito limitado de fonts. O @font-face faz com que o …

Por

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário. Estamos acostumados a usar (os designers que o digam) um pacote de fontes muito limitado de fonts.
O @font-face faz com que o browser baixe, instale e renderize uma font na página.
Nem preciso falar que isso pode deixar o site um pouco mais lerdo. Outro ponto é que nenhum dos browsers tem suporte para isso hoje.

Veja um exemplo:

1
2
3
4
@font-face {
font-family: Nome da Fonte, Verdana, Arial, Tahoma, Sans-Serif;
src: url(enderecodafonte);
}

Existem outras maneiras usando flash. Acontece que a página fica lerdíssima dependendo de quatno texto o camarada aplicou a técnica. Para mim é uma manobra muito trabalhosa.

Links para visitar:

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.guilhermerambo.com Inside

    Eu uso a opção do flash quando preciso, mas claro que sempre com cautela, pra não pesar o site demais…

    []‘s

  • http://acordapraweb.com Alexandre

    A “opção em Flash” chama-se sIFR.

  • http://www.fazedordesite.com Rodrigo Fante

    Eu tinha lido isso no Digital Web, mas realmente me parece bastante trabalhoso.

    Eu uso sempre as fontes padrao, raras e poucas vezes coloco uma imagem ou recorro ao recurso do flash.

  • http://www.webparatodos.com.br Cristian Trentin

    Dependendo do caso não é melhor usar uma img?

  • http://www.webparatodos.com.br Cristian Trentin

    Dependendo do caso não é melhor usar uma img?

    Mas mesmo assim acho que o layout de um site não pode ficar limitado ao tipo de fonte utilizado.

  • http://project47.viscountbox.com/ Carlos Eduardo

    Esse recurso, infelizmente, ainda não é aceito.
    Mas creio que será de grande ajuda quando for…

    Claro, deverá ser utilizado em casos muito específicos, justamente para não tornar o site muito pesado.

    Assim como o download de fontes “extras”, considero que o recurso do flash para exibição de fontes “não-oficiais” deva ser utilizado em casos nos quais seja extremamente necessário e que realmente tenha relevância para o aspecto visual do site ou, até mesmo, sua interação por parte do usuário.

  • Aqualung

    Imagem + valores em “em” + um “alt” com o texto “igual” a imagem.
    É uma boa! ;)
    []‘s

  • http://blog.eucrio.com Helder Santana

    Quanto aos heads, podemos colocar fontes através desse script:

    http://www.stewartspeak.com/projects/dtr/

    Ele usa o componente gerador de png que vem com o php.

    O bom é que ele não afeta sua marcação.

    E seu código ainda continua acessível.

  • http://www.vitorgga.com VitorGGA

    “Outro ponto é que nenhum dos browsers tem suporte para isso hoje.”
    Muito útil! Vishhhhh como é…

  • http://blog.ipe.srv.br nicholas

    Vamos supor que um dia os borwser deem suporte a isso… Além de eu considerar uma tecnica um tanto que intrusiva (raios, ela instala uma fonte na maquina do usuario!) ainda tem o problema do usuario leigo, restrições de browser e afins.

    Será que o cara que entrar no meu site super bem desenhado vai querer instalar a fonte XPTO só para ver o puta trabalho que fiz ou vai procurar o conteudo que interessa a ele? Aí vamos ter q começar a pensar em layouts onde o usuario não quis instalar a fonte!

  • Vitor

    Muito interessante que existe isso. Porém inútil, visto que não é possível usar hoje e nem nos próximos anos…
    Talvez em um futuro bem distante…

  • http://blog.ciin.com.br Daniel Accorsi

    Eu não concordo muito com isso também não. Masss, não adianta “tacar” pedra. QUANDO ficar disponivel essa funcionalidade, poderiamos usar, em certos casos, outros não. A questão é: ele não veio para substituir flash, imagem ou componentes php, veio só para somar.

    Abração.

  • http://nistocremos.blogspot.com/ Fábio dos Santos

    Talvez depois. No momento não é possível.

  • http://webdeleve.wordpress.com/ Tigo di

    A regra @font-face (não é propriedade) funcionava com arquivos eot (Embedded Open Type) e ainda funciona para quem ficou com as atualizações do windows paradas há um bom tempo.

    A atualização que barrou a importação desses arquivos de fontes por motivos de segurança foi essa: http://www.microsoft.com/technet/security/bulletin/MS06-002.mspx

    Essa regra, em sua especificação, parece aceitar qualquer arquivo de fonte. Isso seria bom, seria um opcional no dia-a-dia mas prefiro usar a técnica de image replacement de Gilder/Levin por ser obviamente mais simples e dar menos trabalho para o browser.

    Bom, falei do Win… não tenho idéia de como fica a importação de fonte em outros sistemas operacionais.

  • http://twitter.com/luciokleber Lúcio Kleber

    Pessoal, os tempos mudaram e a coisa está rolando bem e com técnicas/manobra até para IE6 / 7 / Safari 3, eu vou me aprofundar melhor no assunto e depois eu volto para contar a experiência, acho que vocês podem fazer o mesmo!

    http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

    Abrax

  • Pingback: Tipografia na web: Cufón, o concorrente do sIFR | Eduf Labs

  • http://www.tobeguarany.com/internet_no_brasil.php Leonardo Antonioli

    Agora o Firefox 3.5 suporta esse recurso! Sugiro que o Tableless faça um novo artigo sobre.

  • Pingback: Lançado Firefox 3.5 | Boas práticas de Desenvolvimento com Padrões Web

  • Pingback: Clica Aqui » Lançado Firefox 3.5

  • http://www.palcorp.com.br Luiz

    uso cufon, muito rápido e prático, a única limitação está na discussão de copyrights das fontes

  • Régis Adamavicius

    No chrome o @font-face não funciona fica tudo serrilhado só no chorme e ie no Fire Fox fica certinho até parece uma imagem e até agora não descobri por que o chrome acontece isso já que se diz atual