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 |