Tipos de fontes para webdesign
Sexta-feira, 19 de Novembro de 2004
Quem faz webdesign sabe que só há um determinado número de tipos de letra que podem ser utilizados na criação de um website. Os tipos de letra que podemos usar são apenas aqueles que sabemos que existem em todos os computadores, ou seja: Arial, Verdana, Times New Roman…
Sempre que queremos incluir um texto com um tipo de letra diferente do habitual, temos que o fazer através da inclusão de uma imagem no HTML. No entanto, neste momento já é possível fazê-lo apenas com CSS usando uma técnica que se chama FIR (Fahrner Image Replacement). Há várias técnicas para fazer isto, mas a FIR é a mais conhecida.
Mas, se não quisermos usar imagens, então temos mesmo que utilizar aqueles tipos de letra que toda a gente conhece. E aqui surge uma dúvida: será que no Mac existem os mesmos tipos de letra que no Windows? A resposta está nesta tabela que mostra os tipos de letra existentes em Windows e Mac (Windows em preto e a versão Mac em azul).
Alguns tipos de letra têm o mesmo nome nas duas plataformas, mas às vezes um tipo de letra igual tem nomes diferentes, como é o caso da letra Impact que se chama Charcoal em Mac. Quando isto acontece, temos que declarar no CSS o código da seguinte maneira:
{font-family: Impact, Charcoal, sans-serif;}
O que este código faz é: procura no sistema pelo tipo de letra Impact. Se não existir, então procura por Charcoal, e finalmente, se não encontra nenhum dos tipos de letra anteriores abre o tipo de letra default sans-serif.
Usando o Flash
Há pouco tempo surgiu outra técnica para substituir o tipo de letra das páginas web. A nova revolução chama-se sIFR (scalable Inman Flash Replacement).
Com esta nova técnica é possível usar virtualmente qualquer tipo de letra sem nenhuma restrição. É a forma mais rápida e fácil de substituir texto em XHTML por uma versão melhorada (ver outras técnicas de substituição de texto).
As vantagens são enormes (texto escalável, script não-intrusivo, possibilidade de usar mais tipos de fontes), mas também tem os seus inconvenientes. Se o utilizador não tiver o Flash instalado e tiver o JavaScript desactivado no seu computador, esta técnica não funciona.
Tamanho do texto
Que técnica usar para definir o tamanho do texto? Usando a propriedade font-size podemos definir o tamanho do texto em px, %, em, ex, pt ou xx-small a xx-large. O problema é que ao contrário de definirmos o texto em px, se usarmos uma das outras técnicas, o texto vai ficar diferente em todos os browsers. Em alguns fica maior em outros fica menor (e às vezes fica tão pequeno que é ilegível).
Qual a solução? Se queremos tornar o nosso site mais acessível, devemos definir o tamanho do texto em em. Com esta técnica, o texto é escalável e o seu tamanho é definido a partir do default do browser: 1em = default do browser. O problema é que nem todos os browsers usam o mesmo tamanho de letra default. Isto fará com que o texto apareça diferente em todos eles.
Se quisermos ter o controlo do tamanho do texto no site, então temos que definir o tamanho em pixels. O único problema de usar esta técnica é que o Internet Explorer (todas as versões) não permite escalar o tamanho do texto usando a opção do browser. Desta forma o utilizador não consegue aumentar ou diminuir o texto, o que se torna um problema de acessibilidade. No entanto, nos browsers modernos como o Firefox isso já não é problema porque o texto é sempre escalável…
Ivo Gomes tem 29 anos e é licenciado em
Carlos Santos
20 Novembro, 2004, 15:18
Também é possível utilizar outros tipos de fontes, convertendo-as para para ficheiros *.eot utlilizando o Microsoft WEFT. Penso que não se trata de um standard e apenas funciona em browsers IE
A ideia é converter as fontes ttf para ficheiros eot e disponibilizá-los no servidor tal com se faz com os CSS.
Ainda não sei muito acerca desta tecnologia, apenas me despertou a curiosidade da fonte utilizada no site espanhol da cocacola, http://www.cocacola.es.
Fica aqui um pequno exemplo e desafio para explorarem mais o tema.
Cumps
@font-face {
font-family: hooge;
font-style: regular;
font-weight: normal;
src: URL(hooge0.eot);
}
Ivo Gomes
20 Novembro, 2004, 17:45
Pois, o problema é que dessa forma só funciona no Internet Explorer. Eu uso Firefox e o site fico horrível com o tipo de letra que aparece.
No entanto li no A List Apart há uns tempos uma maneira de importar tipos de letra true type através de um script, já não me lembro se era em PHP ou JavaScript… até cheguei a experimentar usar mas já não me lembro porque é que apaguei. E também não vi ninguém a falar disso em mais sítio nenhum…
Maxwel Leite
7 Dezembro, 2004, 16:18
Acho bem melhor e mais prático usar o metodo em que o PHP gera as imagens, vejam os artigos:
http://axisfive.net/aboutsiir/
http://www.alistapart.com/articles/dynatext/
Ivo Gomes
7 Dezembro, 2004, 17:29
Obrigado pelos links. Só tive oportunidade de conhecer esse método precisamente esta semana.
Ruben de Oliveira
17 Setembro, 2005, 19:06
Concordo com o Maxwel Leite.
No entanto, no link http://www.alistapart.com/articles/dynatext/ (que ele sugeriu) está disponibilizado um script em PHP que, para quem o experimentar e verificar que o texto fica com contornos brancos, pode resolver o problema substituindo a linha 79 ($background_rgb = hex_to_rgb($background_color)) por:
$background_rgb = $background_color;
Também me parece que o script tem código a mais com funções que não são absolutamente necessárias, mas é só a minha impressão.
Ruben de Oliveira
17 Setembro, 2005, 19:46
Ainda sobre o método de PHP…
Parece-me que o PHP só tem um pequeno “defeito” pois já há alguns meses que o uso e ainda não percebi como o resolver… é que sempre que se gera texto com fundo transparente, os limites da letra não ficam suaves como seria de esperar…
Se alguém souber como resolver, estou aberto a sugestões!
Lefebvre
3 Outubro, 2005, 22:17
Estou usando um IR, mas a fonte não possui o til e alguns sinais gráficos para português.
Qual fonte pode ser usada nessa técnica?
Ivo Gomes
4 Outubro, 2005, 07:50
Há fontes que não têm todos os caracteres (incluíndo as letras com acentos ou cedilhas). Para isso terá que usar uma fonte que tenha todos os caracteres (deve experimentar primeiro no seu computador para ver quais as fontes que têm acentos e quais as que não têm)…
Lefebvre
4 Outubro, 2005, 13:13
Foi exatamente isso que fiz. O problema foi que algumas ttf que eu tinha no computador não funcionaram.
Obrigado.
Ivo Gomes
4 Outubro, 2005, 13:25
Isso poderá ser problema do script utilizado que não contempla todos os caracteres, independentemente do tipo de fonte.
Manuela
4 Novembro, 2006, 22:20
Olá,
eu queria que vocês me informasem o nome da fonte que usam no rótulo do refrigerente da coca-cola.
Essa da coca-cola é muito show!
Porfavor me informem!!!
Beijão
Manuela
4 Novembro, 2006, 22:22
*correção do ultimo comentario: essa letra da coac-cola é show!
Maxwel Leite
4 Novembro, 2006, 22:55
Loki Cola?
http://smackbomb.com/famousfonts/fonts/cocacola.html
Josy
14 Setembro, 2007, 13:58
Oi eu queria sabe se vcs tem os tipos de fontes para o prog. do CorelDraw e se puder me enviar agradeço. São elas:
futura-Condensed-Bold-Normal
English - Normal
Briem Script-Normal(Ocidental)
Ballet Engaved-Normal-Ocidental
Vinera-Normal(Ocidental)
Chancery-Normal(Ocidental)
Elgar-Normal(Ocidental)
Bodacious-Normal(Ocidental)
Callegrapher-Normal(Ocidental)