sIFR -Tipografia

Jun 12, 2008 I Fontes.

Quantas vezes, você desenhou um website com aquela fonte super-estilosa para os titulos e descobriu que você terá que usar alguma font sans-serif para manter um amaior compatibilidade e identidade visual do site na web. Então a Solução é o sIFR:

sIFR (Scalable Inman Flash Replacement) é um técnica que permite substituir elementos de texto HTML por um equivalente em Flash, do qual permite a inclusão de qualquer Tipografia(Fonte), mesmo se o usuário não tiver instalada em seu computador.

Utilizando o sIFR
O primeiro passo é fazer o download do sIFR 3, extrairemos os arquivos, aonde veremos um pasta flash aonde encontraremos um arquivo sifr.fla o qual devemos abrir no Flash e modificar a fonte da letra, nesta nova versão do sIFR é possível também aplicar alguns filtros a fonte. Salvamos as modificações e exportamos o arquivo. A este arquivo damos um nome, geralmente é o nome da Fonte Selecionada, mas sinta-se livre para nomea-lo da melhor forma possível.

O Passo seguinte é incluir os arquivos sIFR-screen.css e sIFR-print.css que incluimos no HTML:

 



O 2º Passo é incluir também o arquivo javascript sifr.js.

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

O 3º e último passo é utilizar o metodo sIFR.replace para substituir blocos htlm por blocos flah que contem a Fonte selecionada, a sintaxe para fazer isso é a seguinte::

sIFR.replace ( {
src: 'caminhopara-fonte.swf'', // caminho para o swef que contem a fonte
selector: 'html-tag', // tags para serem modificadas
css: '.sIFR-root { prop: value }' // CSS para o flash
} );

Como exemplo iremos criar um arquivo chamado monotype.swf que devem substituir as todos os elementos h1 da nossa página:

Logo se queremos que os elementos tenham a cor de #FF3366 e que tenham 24px de tamanho, adicionamos estas propriedades no css, da seguinte maneira::

 
<script type="text/javascript">//
 
sIFR.replace({
src: 'monotype.swf',
selector: 'h1',
css: '.sIFR-root {color: #FF3366; font-size: 24px; }'
});
//</script>

Agora se por exemplos queremos substituir os elementos que tem a classe azul pela fonte bookman.swf y e o tamanho de 14px podemos utilizar:

 
<script type="text/javascript">//
 
sIFR.replace({
src: 'bookman.swf',
selector: '.azul',
css: '.sIFR-root {color: #0099FF; font-size: 14px;}'
});
//</script>

Podemos utilizar várias vezes o método sIFR.replace para substituir os diferentes tipos de fontes. agora unindo todos os elementos em um htlm temos o seguinte código,:

 



sIFR: Fontes em HTML

sIFR ( Scalable Inman Flash Replacement )…

Via: unijimpe

Leave a Reply