Page 45 - Locaweb - Edição 33

designweb_fontes
locaweb45
Agrande maioria de
designers gráficos,
acostumados com toda
a praticidade do meio impresso,
sofre horrores com as limitações
tipográficas quando passam a
trabalhar no mundo da web.
Para usar uma fonte em um
site, ela devia estar instalada
no computador do usuário para
que pudesse ser visualizada
corretamente. Isso restringia a
um pequeno número de fontes
padrões contidas nos sistemas
operacionais. O pior: tais fontes
teriam de existir em vários
sistemas operacionais ao mesmo
tempo (que acabaram nomeadas
como “web-save fonts”).
Uma das primeiras soluções
para esse problema foi adicionar o
texto que continha uma tipografia
diferenciada em forma de imagens.
Entretanto, trocar textos por imagens
não é o recomendado por inúmeras
razões: desempenho, infraestrutura,
acessibilidade e, principalmente,
indexação do conteúdo e até mesmo a
semântica do documento.
A técnica CSS Sprite foi uma
das tentativas para solucionar esses
problemas. Ou, pelo menos, um dos
mais importantes deles: a indexação.
A grosso modo, o CSS Sprite consiste
em empurrar o texto para um local onde
não aparecerá usando a propriedade
text-indent, dando lugar a um
background-image com a tipografia
desejada. Eis um exemplo:
#logo{
display:block;
background: url(imagem.png)
transparent;
width:100px;
height:100px;
text-indent:-9999px;
overflow:hidden;
}
Nesse caso, a propriedade overflow
serve para que não apareça uma caixa
Por falar em fontes, confira algumas
páginas eletrônicas das quais é possível
baixar seu conteúdo gratuitamente,
sem grandes problemas.
Da Font: www.dafont.com/
1001 FreeFonts: www.1001freefonts.com/
Net Fontes: www.netfontes.com.br/
FONTES NAWEB pontilhada do lado esquerdo do site
quando o elemento for clicável.
Outras soluções foram surgindo.
Uma delas era o sIFR, que usa
javascript e uma fonte embutida em
um arquivo SWF, substituindo os
textos do site pela tipografia desejada.
Dessa forma, poderíamos usar
qualquer fonte em nosso site de forma
acessível, com os textos se mantendo
selecionáveis (o site http://www.
mikeindustries.com/blog/sifr, que
tem conteúdo em inglês, explica bem
todo o processo). Todavia, utilizar um
arquivo fechado e proprietário como
o Flash, mais um arquivo javascript
apenas para essa função, não é o
ideal. Realizar mais dois processos
apenas para isso, muitas vezes,
é inapropriado.
O@font-face
está de volta
O @font-face já fazia parte da
especificação do CSS2 desde 1998.
Mas como essa técnica não foi muito
usada, foi removida da especificação
logo na sequência (com o CSS2.1).
Entretanto, o Internet Explorer já havia
adicionado o suporte ao @font-face
em sua versão 4 em diante. Como a
nova especificação para o CSS3 traz de
volta o @font-face, praticamente todas
as últimas versões dos navegadores
já suportam o recurso. O @font-face
Sites como o MikeIndustries(www.mikeindustries.com), em inglês, explica com didática
o processo de criar páginas eletrônicas de forma acessível, com textos selecionáveis