Trabalhando com duas fontes diferentes no Cúfon

• Home-
• javaScript/
• autor: Adriano Meira /
• publicado em: 21/04/2010

Algum tempo atrás fiz um post sobre fontes personalizadas no seu site, para lembrar veja aqui o post, bom daí pensei em usar duas fontes diferentes em um layout e descobri que é possível e muito fácil, vou mostrar a vocês.

Antes de mais nada de uma olhadinha no post sobre como trabalhar com o Cúfon, aqui vou apenas ensinar a incorporar duas fontes no seu layout usando esta poderosa ferramenta.

Eu escolhi duas fontes “Clubland” e “SpaceMan” que são bem diferentes para ver, com as fontes já convertidas em javaScript vamos inseri-las junto ao Cúfon

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Clubland_400.font.js" type="text/javascript"></script>
<script src="spaceman_400.font.js" type="text/javascript"></script>

Agora abra uma instrução javaScript e vamos falar para o Cúfon qual seletor ele irá colocar as fontes, veja:

<script type="text/javascript">
     Cufon.replace('h1', { fontFamily: 'Clubland' });
     Cufon.replace('h2', { fontFamily: 'spaceman' });
</script>

Note que usamos o parâmetro “fontFamily” e escolhemos qual fonte será aplica em determinado seletor, se quer ver mais atributos visite a API do Cúfon.

E no HTML colocamos assim:

<h1>Fonte: Clubland</h1>
<h2>Fonte: Spaceman</h2>

Ai você se pergunta “onde raios vou achar o nome correto da fonte?” Simples, abra o arquivo gerado pelo Cúfon e logo de cara nas primeiras instruções tem o nome que ele gera, as vezes ele é diferente da extensão que é salvo o arquivo de fonte. Veja abaixo um exemplo:

Cufon.registerFont({"w":280,"face":{"font-family":"Clubland",...

Prontinho, agora uma dica esperta antes de fechar o body você pode colocar um pequeno hack par ao Explorer basta colocar isso e se houver algum problema no Explorer ele resolverá!

<script type="text/javascript"> Cufon.now(); </script>

Simples não? Veja o demo aqui ou baixe aqui o exemplo deste código.

---

Tweet