A tipografia ainda é restrita, somos obrigados a nos restringir a um pequeno número de fontes amplamente suportadas por browsers e sistemas operacionais. No post 2 Bibliotecas JavaScript para Facilitar sua Vida foi apresentada a biblioteca Cufon, que acaba com essa limitação. Com ela podemos usar qualquer fonte tendo a certeza de que será suportada.
No screencast de hoje mostrarei como criar o script contendo os arquivos de fontes a serem utilizados pelo Cufon para renderizar os textos nas páginas, e como implementar.
Screencast
Documento HTML
Ao término do screencast, nosso documento HTML escrito ficou assim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Myriad_Pro.font.js"></script>
<script type="text/javascript">
//<![CDATA[
Cufon.replace(".fonte",{ fontFamily : "Myriad Pro" });
//]]>
</script>
</head>
<body>
<h1 class="fonte">Texto com JavaScript, fonte Myriad Pro</h1>
<script type="text/javascript">
//<![CDATA[
Cufon.now();
//]]>
</script>
</body>
</html>
A função Cufon.now(); foi chamada para acelerar a renderização da página em browsers Internet Explorer. Se utilizada, deve vir sempre logo antes do fechamento da tag body.
The End & Download
Seus textos, com as fontes desejadas, devem estar sendo exibidos em todos os Browsers e OS’s, tendo o usuário seu arquivo de fonte ou não.
Usando Cufon, Qualquer fonte em qualquer Browser e OS (435.57 KB, 212 clicks)
Ae…adorei isso ae!!! Brigadao!!
Legal!
Legal, mas o JS da Myriad Pro tem 2mb, o que torna inutilizável.. estranho.
Bacana…já tinha lido algo sobre o cufon numa revista da área…mas fica aqui uma dica pra quem quiser…se for usar uma fonte diferente apenas em uma determinada área do site (título da página ou rodapé, por exemplo), fica mais fácil criar um swf no flash e usar a fonte desejada. Se o o texto for dinâmico, alterado constantemente….você ainda pode criar um campo de texto dinâmico no flash e fazer o swf receber o texto através de flashVars. Não estou desmerecendo o cufon. Acho bacana a ideia, mas há de se usar do bom senso.
att.
Teria como utilizar o cufon com chamadas CSS?
Sim, claro.
Tem como eu alterar o tamanho da fonte?
Valeu desde já!
que viagem a minha. ignore a questao acima…
Não to conseguindo, converti a fonte e já baixei. Mas onde eu ponho o arquivo? Meu thema ja veio com o cufon instalado, to apanhando bastante pra ele hehehe
André,
Você deve colocar o arquivo dentro da pasta do seu Tema no WordPress. Pode incluí-lo dentro da pasta dos arquivos javascript (em seu tema) ou criar uma nova pasta, desde que seja possível incluir o arquivo na página (via tag script).
Show de bola Pedro, ótima dica.
Boa alternativa para o sIFR, q utilizo nos meus projetos.
O tamanho final de todos os arquivos do Cufon fica um pouco maior, mas acho que no fim vale a pena, pois o sIFR não renderiza igualzinho em todos os browsers, e de vez em quando apresenta usn bugs esquisitos.
Inclusive, o Cufon caiu mto bem no seu site.
@Yuri,
Show de bola! Agradeço os elogios, e ótima observação a respeito do sIFR.
Abraço