@font-face – Estilizando fonte no css
by Luiz Paulo | novembro 13, 2010 | 2 Comments »Estilizar fontes na web sempre foi um sonho para os designers de plantão. Hoje, com o CSS3 e sua funcionalidade @font-face, esse sonho se tornou realidade. Veja como isso é possível.
A capacidade dos programadores de criar gambiarras soluções é impressionante! Lá atrás quando um design chegava com um layout mais estilizado, o cara sempre dava um jeito de resolver o problema.
Uma das primeiras técnicas (da mais utilizada) era gerado uma imagem para cada texto estilizado. O que transformava o site em algo pesado.
Cheguei a ver soluções em SERVER-SIDE, onde era enviado o texto e o servidor criava uma imagem (dinamicamente) com o texto desejado.
Uma outra técnica utilizada é a utilização de FLASH, que utiliza mais ou menos o mesmo esquema do SERVER-SIDE, só que a fonte está "compilada" no SWF.
Mas isso tudo é passado... Não precisamos mais dessas gambiarras soluções. Agora podemos contar com o CSS3 que trás vários recursos para facilitar o nosso trabalho.
Sua utilização é simples!
@font-face { font-family: 'fontAlias'; src: url(font.ttf); } body { font-family: fontAlias, Arial, Heuvetica, Tahoma; }
Essa funcionalidade certamente nos poupará muito tempo de desenvolvimento.
Vale apena comentar... Em um teste que fiz, a fonte "ttf" não funcionou no IE. Precisei converter em "eot" para que funcionasse.
[]'s
Mais Comentados
Categorias: Artigo
Tags:
2 Comentários
[...] @font-face [...]
ótimo post, mas como que faço caso for clocar mais de uma fonte?
seria assim?
@font-face {
font-family: 'fontAlias';
src: url(font.ttf);
font-family: 'fontqueeuquero';
src: url(fontqueeuquero.ttf);
font-family: 'fontqueeuquero2';
src: url(fontqueeuquero2.ttf);
}