Tipografia na web sempre foi um sonho para todo designer para web. Alguns designers que trabalharam durante muito tempo com impressão estranham o tarbalhar com web por conta dessa limitação. A tipografia é parte importante na criação de peças gráficas e na web, isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar fonts externas na criação de layouts para web. Iniciativas como TypeKite Sifr quebram o galho mas não são o ideal.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
font-family: helveticaneue;
src: url(’HelveticaNeueLTStd-UltLt.otf’);
}

Na primeira linha você dá um nome para a Font que você está importando. Pode ser qualquer nome.
Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o browser carrega primeiramente o texto com a font padrão do sistema e logo depois monta o texto com as fonts corretas. Nada de outro mundo para quem utiliza imagens para substituir textos. Mesmo assim, pode ser um incomodo para alguns.

Suponhamos que você queira oferecer a font para os que não a tem disponivel no sistema, mas para que o site carregue mais rápido, queira utilizar a cópia local do sistema do usuário caso ele a tenha instalado:

@font-face {
font-family: helveticaneue;
src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.
Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Fonts pagas

O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.

Basta criar 2 Folhas de Estilo, uma para impressão e outra para visualização.

Depois de criadas, fazemos referência a elas dentro da página assim:

<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”screen”>

<link href=”estilos_impressao.css” rel=”stylesheet” type=”text/css” media=”print”>

A única coisa que muda é o atributo media=”print”, que indica que esta folha de estilos é só para quando vamos imprimir.

Bem simples de resolver…

Basta inserir o parâmetro abaixo no objeto e pronto! Tudo está resolvido. Hehe…

<param name=”wmode” value=”transparent” />

Como fiz pra corrigir?

Você mantém uma página da Web que funciona corretamente no Windows Internet Explorer 7 e gostaria de atualizá-la para que ela funcionasse no Windows Internet Explorer 8 com o mínimo possível de modificações.

Você pode adicionar a cada página uma marca META de modo de compatibilidade, o que fará com que o Windows Internet Explorer 8 renderize a página da mesma maneira que no Windows Internet Explorer 7.

Como modificar cada página?

Coloque a seguinte marca META HTML no elemento HEAD de cada página da Web (antes de qualquer marca que não seja TITLE ou META):

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″/>

Isso instruirá o Windows Internet Explorer 8 a renderizar cada página como se fosse o Windows Internet Explorer 7, corrigindo o seu site.

1º passo - Abra a imagem que quer tratar. Nesse caso, abri uma imagem que tinha 1024×768 pixels.

2º passo - Redimensione a imagem, pois não há necessidade de uma imagem tão grande na Web. Clique na barra de cabeçalho da imagem com o botão direito do mouse e selecione TAMANHO DA IMAGEM. Abrirá uma janela igual a que está logo abaixo. Insira o valor que quiser nos campos ALTURA e LARGURA (nesse caso eu coloquei 600×450 pixels).

3º passo - Vamos salvar a imagem. Clique em ARQUIVO e depois em SALVAR PARA WEB. Vai aparecer uma janela em que você deve inserir o formato que quer. Geralmente pra fotografias uso JPG e pra imagens chapadas (sem muitos degradês, mais simples) uso GIF. Fique atento a previsão do tamanho final do arquivo que aparece no canto inferior esquerdo da janela - quanto menor, melhor pra jogar na Web. No caso de ter escolhido JPG, geralmente deixo com a qualidade ALTA. Clique em SALVAR e pronto!

.transparente
{
FILTER: Alpha(Opacity=20)
}

Altere o valor de acordo com o nível de opacidade que deseja aplicar.

Faça referência a ela no elemento (imagem, camada, texto…) e PRONTO!

Representa para o nosso usuário não só o direito de acessar a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos.

Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar:

1. Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando não a impossibilidade - de interpretar certos tipos de informação.

2. Dificuldade visual para ler ou compreender textos.

3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles.

4. Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet.

5. Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito.

6. Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no trabalho em ambiente barulhento.

7. Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos habituais, ou por voz ou sistema operacional menos difundido.

Essas diferentes situações e características precisam ser levadas em conta pelos criadores de conteúdo durante a concepção de uma página.

Para ser realmente potencializador da acessibilidade, cada projeto de página deve proporcionar respostas simultâneas a vários grupos de incapacidade ou deficiência e, por extensão, ao universo de usuários da web.

Os autores de páginas em HTML obtêm um maior domínio sobre as páginas criadas, por exemplo, com a utilização e divisão de folhas de estilo para controle de tipos de letra, e eliminação do elemento FONT.

Assim, além de torná-las mais acessíveis a pessoas com problemas de visão, reduzem seu tempo de transferência, em benefício da totalidade dos usuários.