CSS 3 – Brincar com fontes
Gosto muito da área de design, mas a verdade seja dita não existe muito jeito para a coisa. Dou uns toques "aqui e acolá" mas considero-me mais um programador, do que um designer.
Mas seja em que tipo de design for uma das partes mais importantes é o texto, e todos os que trabalham na web à alguns anos sabem a dificuldade que é em usar fontes específicas na web.
Como todos sabemos a maneira mais fácil para garantir que todos os visitantes do nosso site vejam o texto correctamente é usando uma fonte segura, uma fonte que normalmente já está instalada no computador do visitante. Para tal as fontes mais seguras costumam ser o Arial, Verdana, Courier New, Comic Sans e mais algumas.
Mas sendo a fonte uma parte importante nos Websites começou a surgir várias soluções para tentar dar volta ao problema. Desde Javascript, a Flash, a PHP, existem soluções para todo o tipo. Mas nenhuma delas é simples de usar.
Na minha opinião todos os navegadores deveriam suportar a solução apresentada usando CSS, o que acredito que mais cedo ou mais tarde aconteça.
Existe o Image Replacement onde é uma aventura com CSS.
Temos também o cufon, penso eu que é uma das soluções mais usadas hoje em dia.
E para quem gosta de PHP temos o facelift.
Não vou falar de nenhuma dessas técnicas, porque mais ano menos ano acredito que não vá ser necessário e também porque não é o objectivo deste tutorial.
Neste momento vários navegadores já a suportam alguns dos novos métodos em CSS 3, e por já vai sendo possível fazer umas coisas engraçadas com fontes.
Como introduzir novas fontes
O método que usamos para introduzirmos fontes específicas no CSS e @font-face.
@font-face {
font-family: NOMEDAFONTE;
src: url('ONDE SE ENCONTRA');
}
Basicamente tens que colocar o nome da fonte, e a sua localização.
Mais simples acho que era difícil, agora claro o famoso Internet Explorer tinha que ter umas surpresas, mas uma delas e o factor de suportar (+/-) o @font-face desde 2004.
O problema é que só suporta fontes .otf (OpenType), mas para tal podes usar um conversor online de fontes .ttf (TrueType) para .otf.
Então como suportar quase todos os navegadores:
@font-face {
font-family: NOMEDAFONTE;
src: url("ONDE/SE/ENCONTRA/FONTE/FICHEIROFONTE.eot");
src: local("NOMEDAFONTE"), url("ONDE/SE/ENCONTRA/FONTE/FICHEIROFONTE.ttf") format("truetype");
}
O local, diz ao navegador para tentar encontrar a fonte no seu sistema antes de fazer o download.
Mas o melhor...
O melhor é os novos serviços de fontes que começam a aparecer na web. Acabam por ser ainda mais fácil do que teres que te preocupar com os diferentes navegadores.
Neste tutorial vou usar o Google Fontes. Pode não ser a fonte super específica que querias, mas para quem está habituado a usar apenas um leque de 10 fontes, isto é uma maravilha.
Outro dos serviços que encontrei recentemente é o Awesome Fontstacks, mas ainda não usei, mas acredito que funcione da mesma forma que o Google fontes.
Para usar o Google fontes é super fácil, neste tutorial vamos usar o Yanone Kaffeesatz fonte, para tal basta adicionar o link para o CSS da Google.
<head>
<title>Fontes</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin' rel='stylesheet' type='text/css'>
</head>
Simplesmente não tens que te preocupar com mais nada, o Google fontes é inteligente suficientemente para destingir o IE de outros navegadores e enviar a fonte correcta e de tratar da declaração correcta para o IE.
Vamos brincar
Antes demais vamos usar a fonte na sua forma mais simples:
Sem muito por dizer, apenas declaramos o tamanho e a fonte.
font-family: 'Yanone Kaffeesatz', arial, serif; font-size:72px;
Vamos dizer que queremos uma sombra, todos nós gostamos do efeito sombra no texto quando estamos a criar um logótipo no Photoshop.
Já tem um pouco de mais piada. Para tal usamos o novo método text-shadow.
font-family: 'Yanone Kaffeesatz', arial, serif; font-size:72px; /* COR | TOP PIXEIS EM RELAÇÃO A POSIÇÃO DA FONTE | ESQUERDA PIXEIS EM RELAÇÃO A POSIÇÃO DA FONTE | BLUR */ text-shadow: #999999 5px 5px 3px;
Podemos também usar o efeito stroke.
font-family: 'Yanone Kaffeesatz', arial, serif; font-size:72px; text-shadow: #999999 5px 5px 3px; -webkit-text-stroke-color: #000000; -webkit-text-stroke-width: 1.50px;
Ou criar uma tentativa de logótipo:
O HTML
<div class="Caixa"> <div class="PT">PT</div> <div class="Tutoriais">Tutoriais</div> </div>
O CSS
.Caixa{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:72px;
}
.PT{
-webkit-transform: rotate(-90deg); /* Rodar 90 graus */
-moz-transform: rotate(-90deg); /* Rodar 90 graus - FF */
float:left;
font-size:36px;
padding:25px;
background-color:#000000;
color:#FFFFFF;
margin-right:15px;
}
.Tutoriais{
float:left;
padding-top:25px;
}
Conclusão
Neste tutorial espero que tenha conseguido explicar algumas das novas funcionalidades oferecidas pelo o CSS 3, sabendo perfeitamente que não vai ser um substituto nenhum ao Photoshop ou outros programas de tratamento de imagens.
Mesmo assim acho que tem a sua utilidade, especialmente quando queremos misturar design com conteúdo dinâmico de um web site.
Sobre o autor
4 Respostas sobre CSS 3 – Brincar com fontes
-
-
Boas Carlos,
Espero que este tutorial tenha ajudado.
Sim, de momento o PT Tutoriais continua à procura de autores para novos tutoriais.
Obrigado
-
-
Boas gostei do artigo, era boa ideia fazerem por exemplo, umas aulas de css a começar do inicio o que acham ?
Cumpz
-
Boas André,
Obrigado pela sugestão, é um caso a analisar, de certeza que vamos ter mais tutoriais de css isso sem duvida nenhuma.
-
Novembro 2, 2010
Eu estava procurando por isso, tutorial veio na hora certa.
E olha que eu cheguei aqui por causa do anúncio de vagas p/ autores de tutoriais!