Aulas sobre Cufon para web site

1. Como utilizar qualquer fonte em sua
página com Cufon
Escrito por: João Paulo Zica Postado dia: junho 28, 2010 Em: Javascript, Tutoriais |
Comentários : 3 Comments
O Cufon é uma API que tem como função substituir fontes em javascript, o que é uma
mão na roda para resolver o problema de fontes utilizadas em seu site, uma vez que
bastam dois arquivos e pequenas configurações para deixá-lo redondo.
De maneira rápida e robusta, o Cufon uma solução sem o uso de plugins, possibilitando
ainda a liberdade de definir diferentes estilos para o texto substituído, através de CSS.
Vejam na prática como funciona em nosso site. O menu lateral foi feito utilizando
Cufon.
COMO UTILIZAR?
Primeiramente, é necessário baixarmos o cufon-yui.js, que é quem faz toda a mágica.
Basta fazer o download o arquivo no site do projeto ( Opção “Download” do Menu),
colocar o arquivo sem seu site e declará-lo:
<script src="cufon-yui.js"></script>
Em seguida, é hora e utilizarmos o gerador, também no site, para que a fonte desejada
seja convertida. O gerador criará um arquivo de fonte SVG e salvá-lo em um arquivo
JS. Deveremos selecionar a fonte a ser utilizada, selecionar os caracteres a serem
usados, recomendável selecionar a opção “All”(Todos), ler os “Terms” e selecionar “I

2. acknowledge and accept these terms” e, por fim, no final da página clicar em “Let’s do
this”. Será gerado um arquivo js, faça o download dele.
Nota: A fonte a ser convertida não pode estar na pasta “Fonts”. Copie a fonte para outro
local e selecione de lá.
Com o download feito, esse arquivo precisa ser incluído em outro <script> após o
Cufon:
<script type="text/javascript" src="js/Rockwell_400.font.js"></script>
Agora é o momento de substituir o texto desejado. Iremos utilizar a seguinte função:
<script type="text/javascript">// <![CDATA[
Cufon.replace('h1');
// ]]></script>
Com esta função, o Cufon se encarregará de substituir toda tag h1 de seu site e
converter para a fonte declarada.
Podemos trabalhar melhor estas substituições, especificando pontos específicos a serem
substituídos. Podemos utilizar para isso Id’s e Classes do Css por exemplo:
<script type="text/javascript">// <![CDATA[
Cufon.replace('#id');
Cufon.replace('.classeCss');
// ]]></script>
Dessa maneira, a substituição deixa de ser em todo o documento, e passa para os
campos desejados.
Além disso o Cufon possibilita a substituição de mais de uma fonte, como no exemplo:
<script type="text/javascript">// <![CDATA[
Cufon.replace('#id',{ fontFamily:'Rockwell'});
Cufon.replace('.classeCss',{ fontFamily:'Museo 300'});
Cufon.replace('#id span',{ fontFamily:'Myriad Pro'});
// ]]></script>
Sempre lembrando que é necessário declarar todos os arquivos js de fontes que serão
utilizadas no seu site.
Qualquer dúvida, pode consultar a rica documentação do Cufon em
http://wiki.github.com/sorccu/cufon/, ou deixe seu comentário no post.
Até a próxima!