Técnicas e ferramentas práticas de substituição de imagem dinâmica

Quando se trata de web design, a criatividade do design não deve ser retida pelas escolhas limitadas de fontes web suportadas que chamamos de fontes seguras para a Web. Designers devem ter liberdade para usar quaisquer fontes que preferirem em títulos e conteúdos.

Em 2005, a substituição dinâmica de imagens tornou-se popular com uma técnica chamada Substituição escalável de flash Inman (sIFR). Desenvolvido por Shaun Inman, O sIFR aproveita o Javascript e o Adobe Flash para permitir que os designers da Web usem qualquer fonte personalizada que gostem no site e ainda mantenham a visibilidade para aqueles que não têm essa fonte. E como a web continua a evoluir, hoje temos mais soluções alternativas usando várias tecnologias, caso você não seja um fã do Flash.

Sem mais delongas, vamos dar uma olhada em alguns dos técnicas para obter substituições de imagem dinâmica.

Técnicas comumente usadas

Aqui estão algumas das técnicas mais comumente usadas para substituições dinâmicas de imagens.

Substituição escalável de flash Inman (sIFR)

sIFR é um dos métodos mais populares para incorporar fontes personalizadas em sites. Ele usa Javascript e Flash para gerar um tipo de letra personalizado para o seu site e permite que o tipo convertido seja selecionável. Além disso, o tipo convertido permanece como texto nos códigos-fonte, de modo que o mecanismo de pesquisa ainda pode rastreá-los.

sIFR 2 (recomendado) é a versão estável atual, no entanto, se você estiver olhando para implementar sIFR, você também deve saber que siFR 3 beta também está disponível para download. Pode ser um pouco bugs, mas pelo menos resolve o problema de expansão de fontes sIFR 2.

Ferramentas para sIFR que podem ser úteis:

sIFRvaultsIFRvault é um repositório de fontes sIFR que você pode baixar.
Gerador sIFRFerramenta on-line que permite criar arquivos sIFR .swf com alguns cliques do mouse. Basta carregar a fonte TTF da fonte que você deseja converter, visualizar e baixar.
Converter fontes para sIFRFaça o upload de uma fonte .TTF e este site as converterá em arquivo Flash sIFR.

sIFR Lite

O sIFR original é 22k, então Dave decidiu reformulá-lo usando uma abordagem mais orientada a objetos e o resultado? 3x menor a 3.7k.

Substituição Dinâmica de Texto PHP + CSS (P + C DTR)

Como o nome sugere, este é um método de substituição de texto que usa PHP e CSS que fazem uso do método original descrito por Comissário Rosenberger. É também um aprimoramento da versão anterior desenvolvida por R. Marie Cox que não suporta quebra automática de texto e tags internas. Outra coisa legal sobre P + C DTR é que o texto da imagem pode ser personalizável com tags CSS.

typeface.js

O que faz o typeface.js especial é que eles só usam Javascript para incorporar fontes personalizadas e estilo pode ser ainda mais personalizado com HTML e CSS, nenhum Flash é necessário. É open source e suporta a maioria dos navegadores que estamos usando nos dias de hoje, seja Safari, Firefox, IE (6 ou superior).

Pessoalmente, depois de algumas experiências com o typeface.js, achamos que poderia haver algum espaço para melhorias. Em primeiro lugar, as fontes tendem a render um pouco diferente entre os diferentes navegadores. Se você estiver usando typeface.js, sugerimos que faça uma verificação entre navegadores antes de assumir que o que você vê no Firefox será o que você vê no Safari. Texto também não é selecionável com typeface.js.

Fontes personalizadas em typeface.js não são compiladas; significando que os usuários podem baixar as fontes. Isso poderia levar a um problema de direitos autorais. É aconselhável que você verifique cuidadosamente se as fontes que você está usando estão corretas para redistribuição..

Cufon

Não requer Flash, Cufon é uma ótima alternativa ao sIFR e é bastante simples de implementar. Primeiro, você usa o gerador Cufon para gerar e personalizar a fonte que você quer, então você insere o Cufon Javascript no seu código-fonte e diz ao script quais seletores você quer que as fontes sejam customizadas.

O maior problema com a Cufon seria a questão legal de usar essas fontes personalizadas on-line. Uma vez que é incorporado em JavaScript, pode ser facilmente copiado por qualquer pessoa que veja o código fonte. Cufon fontes personalizadas não são selecionáveis, que é o outro desligar.

Facelift

Também conhecido como Substituição de Imagem de Lifting Facial (FLIR), é outro ótimo método para sIFR que não requer Flash. Parece que outra alternativa é acertar no problema do Flash do sIFR.

Facelift usa PHP e biblioteca GD do PHP. Eles herdam o problema herdado de substituições de fontes personalizadas - não é possível selecionar o texto. Além disso, achamos que também é ótimo.

Mais métodos

As técnicas acima podem ser mais usadas, mas também notamos outras formas de converter seu texto em tipos de letra personalizados.

Selecione o tipo

TypeSelect aproveita typeface.js, jQuery, canvas, toDataURL, propriedades de plano de fundo CSS e texto real sobreposto para dar um tipo de letra personalizado em seu site. Seleção de texto funciona no Firefox, Safari e até no Chrome, mas não no IE.

Substituição de imagem Swf (swfIR)

swfIR permite-lhe aplicar uma variedade de efeitos visuais a qualquer uma ou a todas as imagens do seu site. Por exemplo, você pode adicionar quaisquer imagens em seu site e swfIR adicionará uma borda mais arredondada, girará o posicionamento ou até mesmo adicionará sombras a ele.

Nove Técnicas para Substituição de Imagem CSS

Estas não são substituições de texto dinâmico, mas Chris Coyier demonstra até nove técnicas CSS diferentes para substituir texto por imagens; cada um com um boletim informando a condição de - e se as imagens estiverem ligadas / desligadas, o CSS estiver ligado / desligado.

Font Burner

Font Burner alavancagem em Scalable Inman Flash substituição (sIFR) para alterar seus títulos em fonte personalizada. Tudo que você precisa fazer é encontrar a fonte, selecioná-lo e inserir o código na cabeça e seu título será alterado em nenhum momento.

WordPress + Substituição Dinâmica de Imagem

Se você é um usuário do WordPress em busca de uma solução de substituição dinâmica de imagens para o título ou até mesmo o conteúdo do seu blog, é provável que haja um plugin para eles. Aqui estão alguns plugins de substituição de texto que conhecemos sobre.

sIFR WordPress Plugin - WP sIFRWP sIFR foi criado para remover as complicações de obter fontes personalizadas em um site WordPress. Com o WIFIFR, basta carregar o arquivo de fonte SWF no diretório do plug-in e, em seguida, efetuar login, ativá-lo e configurar todos os estilos no painel Configurações.

Cufon WordPress Plugin - WP-CufonA única coisa que você precisa fazer é converter seus arquivos font e enviá-los para o diretório plugins. Você pode ativar os objetos que deseja substituir no Menu Admin do WordPress.

Substituto de Substituição de Imagem de Lifting Facial (FLIR)FLIR para o WordPress é SEO amigável e só processa a imagem no navegador, se o JavaScript está habilitado. Seu código HTML / XHTML permanece inalterado, deixando suas tags de cabeçalho legíveis pelos mecanismos de pesquisa e a página legível por aqueles sem JavaScript.

Painel de Controle do Font Burnero Font Burner O plugin do Painel de Controle permite que você adicione facilmente qualquer uma das mais de 1.000 fontes gratuitas disponíveis no site Font Burner ao seu tema WordPress..