Vantagens

Este plugin permite que você possa exibir imagens, textos e links dentro de um “slide” que pode ficar passando para os lados ou usando outro plugin fazer alguns efeitos.

Botões de próximo e anterior, para passar o slides

Outra vantagem é a manipulação simples do CSS, com ele você pode editar muita coisa que vai deste o tamanho a posição dos botões.

Desvantagens

Vejo neste plugin apenas dois probleminhas que com alguns plugins passei dificuldade em ter compatibilidade e neste plugin não há o efeito de fade, que em algusn sites fica bem melhor do que “escorregar”.

Este plugin não tem a paginação automática,  uma lista de quantidade de itens abaixo do slide, onde você clicar e é levado ao slide.

Mão a massa

Agora vou mostra como é fácil usar e configurar este plugin, vamos começar com o HTML que será nosso slide, vou fazer algo simples apenas como demonstração, veja:

<ul id="carousel" class="estilo-carousel">
    <li>Slide um</li>
    <li>Slide dois</li>
    <li>Slide três</li>
</ul>

Note que com este plugin dentro de cada “LI” você pode colocar imagens , textos e links

Agora baixe o plugin juntamente com o jQuery e depois chame-os na sua página, atenção na ordem pois em javascript isso influencia  e muito.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>

E depois chamamos  a função que vai fazer 50% da mágica:

<script type="text/javascript">
    $(function(){
        $("#carousel").jcarousel();
    });
</script>

Agora ao CSS que faz os outros 50%, eu defini que meu slide terá uma largura de 400px e de altura 200px

.estilo-carousel .jcarousel-direction-rtl{direction:rtl;}
.estilo-carousel .jcarousel-container-horizontal{width:400px;}
.estilo-carousel .jcarousel-container-vertical{height:938px;}
.estilo-carousel .jcarousel-item{width:400px;height:200px;}
.estilo-carousel .jcarousel-item-horizontal{margin-left:0;margin-right:10px;}
.estilo-carousel .jcarousel-direction-rtl .jcarousel-item-horizontal{margin-left:10px;margin-right:0;}
.estilo-carousel .jcarousel-item-vertical{margin-bottom:10px;}
.estilo-carousel .jcarousel-item-placeholder{background:#fff;color:#000;}
.estilo-carousel .jcarousel-next-horizontal{position:absolute;top:50px;right:0;width:30px;height:100px;cursor:pointer;}
.estilo-carousel .jcarousel-prev-horizontal{position:absolute;top:50px;width:30px;height:100px;cursor:pointer;}
.estilo-carousel .jcarousel-clip-horizontal,
.estilo-carousel .jcarousel-clip-vertical{width:400px;height:200px;}

Aqui uma versão otimizada, note que eu defino o tamanho do slide é no CSS, veja no exemplo abaixo como ficou, como disse é uma versão de testes simples, você pode abusar de sua ciatividade e modifica-lo como quiser.

Parâmetros

Que tal darmos uma incrementada com os parâmetros, existem pluguins que nos fornecem alguma ajuda na hora de montar o seu resultado final, neste por exemplo podemos definir a quantidade de itens, por hora ou falar dos mais básicos você pode conferir mais atributos aqui veja os que mais uso:

Outra Saída

Com base em um plugin algumas pessoas desenvolvem outro melhorando e incrementando, vejam este por exemplo, aqui o cara consegue trabalhar outros efeitos como o fade, mas tome cuidado pois alguns atributos e estilos são bem diferentes, este tem a vantagem deter a paginação automática.

Veja que aqui mostramos as 20 primeiras fotos, para isso vamos seguis os 3 passos a seguir:

1.Link do RSS

Precisamos do link de RSS () que pode ser localizado logo abaixo da página inicial de suas fotos como mostra a figura abaixo:

No nosso exemplo vou utilizar o meu RSS que no caso seria este link:

http://api.flickr.com/services/feeds/photos_public.gne?id=47603660@N03&lang=en-us&format=rss_200

2. Modificando o Link

Para exibir as fotos vamos utilizar um método chamado Jason de leitura de dados, este método se parece com um XML, veja mais detalhes aqui,  com este método podemos listas as fotos e exibi-las com um loop simples.

Para isso altere o último parâmetro do link de RSS de rss_200 para json ficando assim o seu link:

http://api.flickr.com/services/feeds/photos_public.gne?id=47603660@N03&lang=en-us&format=json

Pronto, se você colocar este link no seu navegador verá algo parecido com um XML isso é o Jason.

3.Fazendo o Loop

Este formato de RSS fornecido pelo Flickr exibe as últimas 2o fotos, agora ficou fácil basta fazer um loop onde vamos ler a quantidade de arquivos e vamos imprimir as fotos, veja o script abaixo:

<script>
    function jsonFlickrFeed(o){
        var i=0;
        while(o.items){
            document.write('<img src="' + o.items.media.m + '" alt="' + o.items.title +'">');
            i++;
        }
   }
</script>
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=47603660@N03&lang=en-us&format=json"></script>

Veja que aqui usamos o tamanho médio da foto o Flickr separa as fotos em:

_b é o tamanho Grande
_t é a miniatura
_s é o tamanho de 75x75px
_m é o tamanho médio
Remover o _? significa que você escolheu o tamanho pequeno (_s)

Mas não se limitem apenas em exibir as fotos, você pode colocar os títulos, tags e até criar  uma aplicação com uso de jQuery, o “céu é o limite”!

É isso ai pessoal, dúvidas postem ai, até mais!

Seguinte, eu tinha a seguinte missão, criar um mega-menu, só que ele iria ter muita, muita informação mesmo, ia tipo ocupar a página inteira, o Adriano deu a ideia de colocar um campo para pesquisa de texto dentro desse mega-menu, o que eu achei fantástico porém sem saber a solução.

Depois de um bom tempo da proposta dessa ideia, peguei um livro de jQuery que eu já tinha a um bucado de tempo, por falar nisso podem comprar é muito bom mesmo, é da Novatec e chama-se jQuery, A Biblioteca do Programador JavaScript de Maurício Samy Silva (dono do site Maujor.com). Link para o livro: http://novatec.com.br/livros/jquery2/.

E este livro contém um capítulo apenas para seletores, dentre estes um mi chamou muito a atenção: o seletor seletorjQuery:contains(texto). Onde seletorjQuery seria o atributo dentro do qual você iria procurar, por exemplo $(‘#divExemplo’); :contains(texto) é uma função exclusiva da biblioteca jQuery e não é prevista na CSS3, que procura dentro do seletorjQuery qualquer ocorrência do texto digitado.

Bem vamos a um exemplo prático, que eu acho que será auto explicativo. Para que você possa executar esta pesquisa de conteúdo você só precisará da biblioteca jQuery, pura e simples.

Antes de qualquer execução de script jQuery, chame o jQuery…

<script type="text/javascript" src="jQuery.js"></script>

Agora que o seu jQuery está pronto para ser executado vamos criar uma table (Sou programador viu gente… me condena não… table salva minha vida até hoje) com um id tableFind que usaremos para pesquisar o texto, e um campo input text com id textFind onde digitaremos o texto a ser localizado.

<input type="text" id="textFind" />
<table id="tableFind">
  <tr>
    <td>faca</td>
    <td>bolo</td>
  </tr>
  <tr>
    <td>tempo</td>
    <td>dinheiro</td>
  </tr>
  <tr>
    <td>pão</td>
    <td>manteiga</td>
  </tr>
</table>

Depois desta bela table criada iremos gerar o código jQuery responsável pela busca. É importante ressaltar que assim como o JavaScript puro deve ser lido apenas depois do carregamento de toda a página com o metodo window.onload = function(){} o jQuery também deve seguir o mesmo raciocionio porém com duas formas básicas de se escrever a sintaxe:

A forma completa:

$(document).ready(function()
{
   ...faça isso...
});

e a forma reduzida:

$(function()
{
   ...faça isso...
});

Ambos os exemplos funcionam perfeitamente porém o primeiro possui um dom auto explicativo em sua página. Por este motivo usarei a forma completa de escrita.

Vou mostrar o código depois explico ele linha por linha:

<script>
  $(document).ready(function()
  {
    $("#textFind").keyup(function()
    {
      stringPesquisa = $("#textFind").val();
      $('table#tableFind tr td').css("background","");
      $('table#tableFind tr td:contains('+stringPesquisa+')').css("background","#FFFF00");
    });
  });
</script>

Acho que vocês já intenderam a essência do código, mas vamos lá. Estou usando o evento keyup do jQuery (em JavaScript puro é o evento onKeyUp, ele é acionado toda vez que eu seguro e solto uma tecla), que pega  o valor atual do meu input e o coloca dentro da variavel stringPesquisa.

Posteriormente eu localizo todos os td, dentro de tr, dentro de uma table com id tableFind e zero a sua propriedade background. Esta parte da função é extremamente importante para que eu possa realizar várias pesquisas a cada toque. Pois ela anulará a pesquisa do texto anterior e localizará o novo texto, dando dinamismo à pesquisa.

Agora começa o seletor :contains. Logo após localizo todos os td, dentro de tr, dentro de uma table com id tableFind que contém o texto digitado no input e adiciono a cor #FFFF00 (Amarelo/yellow) ao seu background, dando um efeito de marca texto.

Esse é o link para o exemplo funcionando:

Gente esse foi o meu primeiro post estou grato de mais pela oportunidade e espero que tenha sido util para vocês… Abraços…

Ok qual a vantagem de se usar o método “POST” e “GET”? Uma das grandes vantagens é que o tempo de resposta é real, note que no artigo anterior usamos um “setTimeout” para dar um “delay” na respota, já nestas funções eles tem um retorno de acordo com o tempo de busca, na íntegra a função “POST” e “GET” tem:

$.post( url, [ dados ], [ sucesso(data, textStatus, XMLHttpRequest) ], [ dataType ] )

$.get( url, [ dados ], [ sucesso(data, textStatus, XMLHttpRequest) ], [ dataType ] )

Isso quer dizer então que ao chamar a função (“POST” ou “GET”) passo uma URL que vai receber os dados, seria no caso o parâmetro que se passa via GET ou POST, com exemplo “index.php?id=1” logo o dado seria “id: 1” e por fim o resultado ao passar os dados.

Então na prática vamos começar com o carregamento de selects (combobox)

Chame o jQuery na sua página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Agora vamos criar a função que vai pesquisar os dados na página, veja:

function pegaValor(valor){
	$('#encontrado').html("Pesquisando...");
	$.post("pegaValor.php", { id: valor },
		function(data){
		$('#recebendo').html(data);
	});
}

Agora vamos aos selects, o primeiro que vai passar os dados e o segundo que vai receber os dados da função:

Selecione:
<select id="selecione" name="selecione" onChange="pegaValor(this.value)">
    <option>Selecione algo</option>
    <option value="1">Dado Um</option>
    <option value="2">Dado Dois</option>
    <option value="3">Dado Tr&ecirc;s</option>
</select>
Depois o que vai receber os dados
<select id="recebendo">
    <option value="">Escolha algo antes</option>
</select>

$id = $_POST["id"];
if( $id == "Selecione algo"){
	/* Se o valor tiver vazio retona vazio */
	echo "<option>Selecione algo</option>";
}else{
	/* Se tiver o valor então faz checagem no
	   banco ou outra como abaixo */
	switch($id){
		case 1;
			echo "<option>Voc&ecirc; selecionou o um</option>";
			break;
		case 2;
			echo "<option>Voc&ecirc; selecionou o dois</option>";
			break;
		case 3;
			echo "<option>Voc&ecirc; selecionou o tr&ecirc;s</option>";
			break;
	}
}

Prontinho, agora vamos brincar um pouco mais vamos fazer uma função para que o cara digite algo e retorne com uma busca pela letra que digitou ou palavra, para começar a função abaixo para pesquisar:

function pesquisaValor(valor){
	$('#encontrado').hide();
	$.post("pesquisaValor.php", { id: valor },
		function(data){
			if(data == ""){
				$('#encontrado').hide();
			} else {
				$('#encontrado').show();
				$('#encontrado').html(data);
			}
	});
}

E agora o HTML onde o cara digita a palavra e a DIV onde vai receber o resultado:

<small>Dica: Procure pelas letras A, B, C e teste</small><br />
Digete um termo: <input type="text" id="pesquisar" class="pesquisar" onKeyUp="pesquisaValor(this.value)" />
<div id="encontrado" style="display:none"></div>

$id = $_POST["id"];
if( $id == "Selecione algo"){
	/* Se o valor tiver vazio retona vazio */
	echo "Nada encontrado";
}else{
	/* Se tiver o valor então faz checagem no
	   banco ou outra como abaixo */
	switch($id){
		case "a";
			echo "Abacate<br />";
			break;
		case "b";
			echo "Banana<br/>Biribiri<br /.;";
			break;
		case "c";
			echo "Caqui<br />Caju<br />carambola<br />";
			break;
		case "teste";
			echo "opa viu como funciona até chegar na &uacute;ltima letra 'e'
				  ele não apresentou o resultado.";
			break;
	}
}

Agora você pode utilizar esses modelos e dicas para criar coisas mais sofisticadas como formulários sem refresh, carregamento de conteúdo vindo do banco também sem refresh , buscar dados em uma página externa, retornar se uma condição é verdadeira ou falsa, caso desejem postem ai algumas dessas funções que queiram que eu detalhe e de exemplos, fiquem a vontade.

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.

Então pensei em cookies e achei algo bem bacana que compartilho com vocês, com um pouco de jQuery e este plugin conseguimos gravar num cookie uma condição, checa-la e aplica-la.

Em exemplo prático seria o seguinte imagine que deseja que tenha três tipos de estilo um normal (defult) outro com com de fundo clara e outro com letras brancas e fundo escuro, para facilitar a leitura para certos usuários que tenham dificuldade visual. Logo nada mais justo que dar a ele uma forma de escolher como o site melhor adequará a sua necessidade.

Veja aqui um exemplo funcionando.

Então vamos botar a mão na massa é muito simples precisamos do jQuery de praxe e de um plugin de cookies que você pode baixa-lo aqui ou visitar o site e conhecer melhor.

Primeiramente vamos criar três estilos diferentes, daí vai do seu gosto eu criei estes aqui com seus respectivos nomes apenas trocando a cor de fundo veja:

Nome: style1.css

body{ background-color:#FFF; }

Nome: style2.css

body{ background-color:#F90; }

nome: style3.css

body{ background-color: #DDD; }

Bom agora com os estilo prontos vamos ao HTML, chame um estilo defult no html como por exemplo eu estou usando o estilo 1, aproveite para chamar também o jQuery e o plugin de cookie:

<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>

Agora vamos montar os links, aqui vou fazer o seguinte ao clicar no link dentro de um li pega o valor do seu “REL” e aplica na função, fica assim então:

<ul id="nav">
    <li><a href="#" rel="style1.css">CSS Original</a></li>
    <li><a href="#" rel="style2.css">Fundo Claro</a></li>
    <li><a href="#" rel="style3.css">Fundo Escuro</a></li>
</ul>

Beleza então vamos agora voltar ao cabeçalho e colocar os códigos de javascript e jQuery para chamar e gravar o cookie, mas antes de mais nada uma rápida explicação sobre o plugin, ele pode gerar um novo cookie com o nome que quiser e o valor desejado, por exemplo, vamos criar um cookie chamado “css” e seu valor será o nome do arquivo por exemplo “style2.css”, também neste plugin você pode decidir quanto tempo este cookie será valido por exemplo um ano, dois meses, um dia… daí vai da sua aplicação, por exemplo um sistema de login que o cookie vale por um dia, mas tome muito cuidado com isso pois se alguém conseguir pega-lo poderá usa-lo para o “mau”, use com cuidado!

Seguindo nosso exemplo, usaremos por um ano 365 dias, o plugin trabalha com dias ok? Antes de carregar o jQuery vamos checar se foi setado o cookie com nome “CSS”:

if($.cookie("css")) {
   $("link").attr("href",$.cookie("css"));
}

Note que aqui verificamos se o cookie “css” foi setado se sim atribuímos ao “link”  que  equivale ao body (veja mais na documentação do jQuery), aqui também abro um leque de possibilidades para você, você pode usar também isso em algum elemento com uma “DIV” que será exibido ou não, um menu em árvore que esteja aberto ou não, checar se um usuário está logoado ou não… daí como disse vai da sua aplicação.

Em seguida vamos a ação de clicar e mudar as coisas, vamos abrir a função “ready” do jQuery e colocar a função veja:

$(document).ready(function() {
    $("#nav li a").click(function() {
     $("link").attr("href",$(this).attr('rel'));
     $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
     });
});

Aqui estou falando o seguinte para o navegador, ao clicar em um link dentro da “DIV” com id=”nav” faça:

1. Atribua ao “link” (body) o atributo href (link) o valor do “REL” deste (this)  link, logo ele ficaria assim: href=”style3.css” se clicar no link correspondente.
2. Em seguida crie o cookie “CSS”, que seu valor será o “REL” deste (this) link e vai expirar em 365 dias.
3. E me retorne falso para que nada mais mude a não ser as instruções passadas acima.

Prontinho agora para testar na sua máquina ela tem que ter configuração de um servidor para rodar cookie, se não jogue em algum servidor,  aqui você pode conferir um exemplo rodando e aqui pode baixar este exemplo que está  rodando.

Créditos deste artigo vão para CSS newbie. Valeu pessoal!

Bom espero ter ajudado algumas pessoas que me perguntaram sobre isso! Até mais grande abraço!

Mas vamos lá hoje vou mostrar como é fácil e rápido fazer um menu acordeon (sanfona) com jQuery. Para começar vamos para o HTML e CSS assim você poderá controlar melhor o estilo, o estilo aqui em questão bem como o HTML são ilustrativos fique a vontade para modificar ou fazer da sua melhor forma.

Para o HTL (explico mais abaixo o porque desta estrutura)

<ul id="menuGeral">
    <li><a href="#" class="itemMenu">Gerenciar Notícias</a>
        <div class="conteudoMenu">
             <a href="#">Adicionar nova Notícia</a>
             <a href="#">Pesquisar Notícias</a>
        </div>
     </li>
     <li><a href="#" class="itemMenu">Gerenciar Eventos</a>
         <div class="conteudoMenu">
            <a href="#">Adicionar novo Evento</a>
            <a href="#">Pesquisar Eventos</a>
         </div>
     </li>
     <li><a href="#" class="itemMenu">Gerenciar Meus dados</a></li>
</ul>

E para o CSS:

ul#menuGeral{
 margin:0px;
 padding:0px;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size:11px;
 list-style:none;
}
ul#menuGeral li{
}
/*-Para todos os atributos 'a', aqui será a marcação da sanfona-*/
ul#menuGeral a{
 display:block;
 padding:3px;
 cursor:pointer;
 color:#000;
 text-decoration:none;
}

/*-Para todos os atributos 'a' dentro de uma 'li'-*/
ul#menuGeral li a{
 padding-left: 20px;
 background-color:#DDE0EF;
 border:1px solid #D4D4D4;
 margin-bottom:1px;
}
ul#menuGeral li a:hover{
 background-color:#B7BDDD;
}

/*-O conteudo que fica debaixo da opção da sanfona-*/
ul#menuGeral .conteudoMenu{
 border-left:1px solid #D4D4D4;
 border-right:1px solid #D4D4D4;
 padding:5px;
 background-color:#F7F7F7;
}
ul#menuGeral .conteudoMenu a{
 background-color:#F7F7F7;
 padding-left:25px;
 margin-bottom:0px;
 border:0px;
}
ul#menuGeral .conteudoMenu a:hover{
 background-color:#DADADA;
}

Ok veja agora como ficou seu menu, bunito né? Lembre-se mude o quanto quiser o importante vem agora, veja que mamão com açúcar, importe seu jQuery, caso não tenha baixe-o aqui.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Em logo abaixo coloque o seguinte código, irei explicar:

<script type="text/javascript">
    $(document).ready(function(){
        $(".conteudoMenu").hide();
        $(".itemMenu").click(function(){
            $(".conteudoMenu").slideUp("slow");
            $(this).next(".conteudoMenu").slideDown("slow");
        });
    });
</script>

Com este código você ve que o menu que clica em azul abre e se houver outro aberto ele fecha, para deixar somente o menu aberto e ao clicar no mesmo ele feche use isso:

<script type="text/javascript">
    $(document).ready(function(){
        $(".conteudoMenu").hide();
        $(".itemMenu").click(function(){
            $(this).next(".conteudoMenu").slideToggle(300);
        });
    });
</script>

Note que removi uma linha e mudei outra, vamos a explicação do jQuery, “confiram comigo no replay“.

Depois de ler o documento eu escondo todos os conteúdos, para garantir que o menu ficará fechado, “mas Tio se eu quiser que apenas o primeiro fique aberto como faço?”, simples mude a primeira instrução para:

$(".conteudoMenu:not(:first)").hide();

Nem precisa comentar né: Se não for o primeiro…

Seguindo a instrução que digo que ao clicar no seletor de classe “itemMenu” no primeiro ele diz que sobe todos os seletores com classe “conteudoMenu” e em seguida abaixo o próximo seletor deste mesmo que eu cliquei (exibindo o conteúdo), para a segunda alternativa depois de clicar usa a propriedade “slideToggle” que retorna uma ação anterior, que no caso é escorregar.

Para um bom funcionamento deste efeito sempre tenha em mente que ao clicar em algo, um seletor abaixo dele abrirá e assimpor diante, por isso a estrutura de HTML que mencionei acima, mas pode mudar como por exemplo:

<h4 class="itemMenu">Gerenciar Notícias</h4>
<cite class="conteudoMenu">
   Lorem ipsum dollor<br />
   Set huni...
</cite>
<h4 class=""itemMenu">Outro Item sem nada</h4>

Simples, fácil né? Dúvidas postem ai.

É isso ai até mais pessoal!

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!