Olá pessoal depois do sumiço eu voltei, há Itacaré hô lugarzim maneiro viu haha mas voltando ao trabalho…
Pessoal hoje vou falar de um assunto muito bacana, digamos que seu cliente utiliza uma fonte padrão e quer aplica-la no site, logo você parte para o flash (ou técnicas complicadas para isso), mas também ele quer se posicionar no google, o que fazer???
Não se apavore vou mostrar para vocês hoje como utilizar os recursos do Cufó, uma aplicação em javaScript que converte sua fonte para JS e poderá aplica-la a um seletor qualquer, mesmo se ele for dinâmico ou do Banco de Dados, a única restrição é que em alguns navegadores não tem como ser selecionado.
Bom chega de falar e vamos botar a mão na massa! Em primeiro lugar escolha uma fonte que seja free, assim você não corre o risco dos diretos autorais caiem sobre você neste exemplo vou utilizar a fonte Officer Down , baixei ela do site dafont.com, mas fique a vontade de usar qualquer uma desde que seja free hein?!
Depois da fonte baixada vamos ao site do pessoal acesse http://cufon.shoqolate.com em primeiro lugar faça o download do arquivo cufon-yui.js que fará o trabalho sujo para nós, em seguida vamos converter nossa fonte, boms eiu que i site é em Inglês mas vou tentar explicar de forma rápida.
1º – Na primeira etapa Select the font youl´d like to use vocêvai escolher de acordo com a fonte baixada os tipos se ela é regular, bold, itálica regular, bod e itálica, isso vai depender do pacote de fontes neste exemplo só temos a fonte no formato Normal, logo suba apenas a fonte normal.
2º – Incluindo Glyphs, isso na verdade se trata dos caracters de uma fonte isso é muito importante para que nós Brazucas possamos colocar acentuação na fonte marque a opção Basic Latin e Latin-1 Suplement assim ficará leve e com acentos, mas como disse isso depende da sua aplicação da fonte, digamos que não precise de acentos será em um numeral ok?
3º – Em security se a fonte for só sua você a comprou ou a desenvolveu aqui você gera uma garantia que ela será usada pelo seu site, opicional
4º – Aceite os termos (marque opção “The EULAs of these fonts allow Web Embedding”) e seja feliz!
Bom a parte de compreensão e customização é mais técnica não vou aborda-la aqui aconselho a dar uma boa olhada na documentação se isso lhe interessar
Ok agora temos nosso arquivo OfFiCeR_DoWn_500.font.js gerado e pronto para a ação vamos ao HTML
Vamos preparar o terreno, dentro seu body crie a seguinte estrutura, somente para testes ok:
<h1>Lortem Ipsum Dollor</h1> <div id="menu"> <span><a href="#">Lorem</a></span> <span><a href="#">Ipsum</a></span> <span><a href="#">Dollr</a></span> </div>
Agora o CSS, mais uma vez isso é opcional ok?
body{ text-align:center; } h1{ font-size:60px; } div#menu{ } div#menu span{ padding:10px; } div#menu a{ color:#333; font-size:20px; text-decoration:none; } div#menu a:hover{ color:#FF0000; }
Agora vamos ao códigos de JS, insira os arquivos baixado e Gerado:
<script type="text/javascript" src="cufon-yui.js"></script> <script type="text/javascript" src="OfFiCeR_DoWn_500.font.js"></script>
Agora vamos ao seletor aqui você seleciona qual elemento irá receber a sua fonte:
<script type="text/javascript"> Â Â Â Â Cufon.replace('h1'); Â Â Â Â Cufon.replace('#menu span'); </script>
Prontinho! agora poderá utilizar sua fonte personalizada sem muito trabalho e funciona até no Explorer incrÃvel não?!
Além de aplicar a fonte você poderá colocar efeitos de degrade e outros, sugi que leia os exemplos do site ou a docuementação completa em breve irei postar mais sobre o assunto, por hoje é só pessoal!
Tweet |
Não seu certo, segui os passos mas no final surge a seguinte mensagem: You didn’t confirm that you’re allowed to use the font.
Pode me ajudar?
Consegui, tive que marcar a opção ‘The EULAs of these fonts allow Web Embedding ‘
bom dia fiz, o passo a passo mas nao deu certo nao mudou nada
nao deu certo fiz tudo como ta no passo a passo
Fiquei muito interessada no tutorial pois procuro há muito tempo e nunca consigo entender. Vi você falando e baixei o cufon-yui.js , mais você falou em html e em css, em outro tutorial tinha que completar esse arquivo com um endereço para o arquivo convertido, ficou confuso e não entendi.
Como esse script tão simples faz funcionar, o que aconteceu com o arquivo mencionado ali em cima?
Agora consegui, obrigada pela atenção. É incrivel como um errinho no código da problema nele inteiro. Agora ficou claro, obrigada mesmo. Sucesso para você, vou aproveitar e ler outros posts.
Olá tem como fazer isso em blog da blogger?
e outra…
Quando fui fazer o download do arquivo cufon-yui.js na verdade abriu uma pagina com um codigo ! esta certo?
Outstanding publish it happens to be extremely. We’ve been awaiting for this info.
Thanks for the good writeup. It actually used to be a enjoyment account it. Look advanced to far added agreeable from you! By the way, how could we keep in touch?
Olá, amigo, estou querendo usar este metódo para gerar um aplicativo.
Porém a acentuação não funciona, todas as letras com acento, não aparece, no mais sua postagem foi de grande ajuda, parabéns. Se souber o que está acontecendo, favor responder.
MUITO legal isso, vai me ser bem útil!!!!! VALEU