Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

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/