sIFR: Tipografia e HTML

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?

Ela simplesmente converte um texto comum em um texto em Flash, mas com um detalhe importante: o texto convertido recebe uma nova tipografia. Dessa forma você consegue utilizar qualquer fonte em seu site de forma leve, fácil e amigável aos motores de busca.

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

Calma, isso também foi pensado. Se o texto não for convertido para Flash, ele se manterá com uma formatação já pré-definida por você em sua folha de estilo.

Como isso é possível?

Vamos analisar o código abaixo:

<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?

Pega o valor dentro de h5#fonte1 e envia para o SWF (no exemplo acima comics.swf), que retorna o valor enviado, formatado com a nova tipografia e com o CSS informado.

Qual a vantagem de usar essa técnica?

Você pode utilizar qualquer fonte para formatar os textos sem utilizar imagens. Logo, você ganha qualidade, tempo em manutenção e facilita a vida dos motores de busca (pois terá um código otimizado).

Como utilizar passo-a-passo

Faça o download dos arquivos necessários clicando aqui.

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>