Faça o curso: jQuery na Prática

Quem nunca, ao desenvolver um site, pensou em utilizar uma tipografia diferente dos padrões do sistema operacional, mas não arriscou por saber que quando o usuário acessasse, não conseguiria visualizar da mesma forma por não ter a fonte instalada?

Ou então pegou aquele layout já aprovado pelo cliente e se assustou quando percebeu que foi utilizada uma fonte que um micro comum jamais teria, e como não podia alterar converteu os textos em imagens para tentar salvar o trabalho?

Pois bem, pensando nisso, Mike Davidson e Mark Wubben (agradeça a eles) criou a técnica sIFR (Scalable Inman Flash Replacement). Essa técnica nada mais é do que a união de Flash + Javascript + CSS para substituir textos.

Talvez muitos já conheçam, mas acredito que a maioria ainda não sabe da existência dessa técnica que já está na sua versão sIFR 3.0.

Mas o que essa técnica faz?

E se o navegador do cliente não tiver suporte a Javascript ou Flash?

Como isso é possível?

<h5 id="fonte1">iMasters</h5>

h5 é a nossa tag de marcação e fonte1 é o nosso ID.

Uma função Javascript verifica se é possível utilizar Flash e faz a conversão. Veja:

sIFR.replace({
src: 'comics.swf'
      	,selector: 'h5#fonte1'
      	,css: '{ font-style: normal; color: #660000; }'
      	,selectable: false
});

O que ela faz?

Qual a vantagem de usar essa técnica?

Como utilizar passo-a-passo

Obs: Optei por usar a versão 3, mas no site está disponível a versão 2. A utilização é um pouco diferente entre as versões.

Concluído o download, extraia os arquivos em uma pasta. Os arquivos já estarão organizados em algumas pastas. Utilizaremos as pastas js, css e flash. Acesse a pasta flash e abra o arquivo sifr.fla. Nesse arquivo você vai escolher a fonte que deseja utilizar (dê dois cliques sobre o movieclip "holder" para acessar o texto e alterar a fonte).

Após alterar a fonte, exporte o swf normalmente. Você pode colocar qualquer nome no arquivo (por padrão utilizaremos o nome da fonte).

Crie um arquivo HTML e coloque um texto qualquer de exemplo, utilizando a tag h4 para marcar algumas partes. Inclua os arquivos sifr.css e sifr.js. Ex.

<link rel="stylesheet" href="css/sifr.css" type="text/css">
<script src="js/sifr.js" type="text/javascript"></script>

Obs. Respeite a estrutura das pastas. No exemplo citado, o arquivo.html e o SWF exportado estão na raiz.

Agora vamos utilizar a função Replace e Activate, que insere a nova tipografia.

<script type="text/javascript">
	var f3000 = {src: 'f3000.swf'};

	sIFR.activate(f3000);

	sIFR.replace(f3000,{
		,selector: 'h4'
		,css: '.sIFR-root {color: # 660000; font-size: 24px; }'
	} );
</script>

src: Arquivo com a fonte gerado por criado por você.

css: Formatação CSS. É utilizado da mesma forma que se utiliza no HTML.

Clique aqui e veja um exemplo.

Abaixo listei alguns links referentes a sIFR para que vocês possam conhecer melhor e descobrirem outras funcionalidades dessa técnica.

Abraços e até a próxima pessoal.

Referências (inglês):

Site oficial - http://www.mikeindustries.com/blog/sifr/

sIFR Wiki/ Documentação - http://wiki.novemberborn.net/sifr/