webmaster

fontResizer – Controlar Tamanho Da Fonte Com jQuery

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

fontResizer – Controlar Tamanho Da Fonte Com jQuery

fontResizer: aumentar e diminuir textos no site (representação)

Já aconteceu se você entrar em algum site e achar o tamanho dos texto pequeno de mais? Já entrou numa página da internet e percebeu que está com certa dificuldade de leitura e não enxerga muito bem as letras? Se não aconteceu com você, fique sabendo que acontece, diariamente, com centenas de milhares de pessoas.

Algo simples pode se feito para sanar este problema e aumentar a usabilidade e acessibilidade de seus sites: controle de tamanho de fontes! Basta um simples controlador para o tamanho das letras e pronto: caso alguém se sinta desconfortável ou, mesmo, não consiga visualizar corretamente os conteúdos em função do tamanho diminuto da fonte, basta usar o controlador para aumentar. O contrário também: se julgar que está tudo muito grande e/ou ocupando espaço demais, basta acessar a ferramenta de controle de tamanho de fonte e usar a função “diminuir”.

Mas, como aumentar o tamanho do texto do site automaticamente? Simples, usando o fabuloso plugin para jQuery fontResizer!

O fontResizer aumenta ou diminui o tamanho dos textos de elementos específicos do site e ainda grava um cookie para, quando o visitante retornar ao site, este já apresentar as configurações escolhidas por ele previamente.

Usando fontResizer

A primeira coisa a se fazer depois de baixar o script do fontResizer, é inserir no <head> do seu documento o jQuery e o próprio fontResizer (obviamente, alterando os caminhos para ficarem de acordo ao que você está usando em seu projeto):




Com o plugin para aumentar / diminuir o tamanho dos textos, as mudanças podem ser incrementais ou com valores pré-determinados.

Para mudanças incrementais:

  • Qualquer elemento com a classe “increaseClickItem” aumenta o tamanho da fonte.
  • Qualquer elemento com a classe “decreaseClickItem” diminui o tamanho da fonte.
  • O valor de incremento padrão é de 2.

Quando os valores das propriedades “minFont” e “maxFont” são selecionados, a classe “disabled” é automaticamente aplicada ao item oposto (se selecionar para aumentar, a classe se aplica ao que diminui e vice-versa). O mesmo vale se o cookie fontResizer retorna um valor que corresponda a minFont ou maxFont.

Para mudanças de tamanhos específicos, aplica-se o seguinte:

  • Qualquer elemento com a classe “setFontSize” especifica o tamanho da fonte.
  • O tamanho é determinado através do atributo “title”, que precisa ser passado quando a classe é setada.
  • Exemplo: <a title=”20″> vai colocar o tamanho da fonte em 20.

Quando um elemento com a classe “SetFontSize” é clicado, a classe “on” é passada para ele. Quando um outro elemento com a classe “SetFontSize” é clicado, a classe é removida do anterior e passa para esse. Isso também ocorre com elementos de classe “increaseClickItem”  e “decreaseClickItem”, quando estes chegam a um valor que corresponde a um valor de elementos com “SetFontSize”. O mesmo é verdade se o cookie fontResizer retorna um valor que corresponde a um valor “SetFontSize”.

O uso do fontResizer consiste em chamar a função de inicialização e passar as opções que se deseja (apresentadas a seguir). Por exemplo, fazer com que o controle de tamanho de textos funcione nos parágrados da div com ID “content” e elementos com classe “resizeMe”:


jQuery(document).ready(function($){
$('#content p, .resizeMe').fontResizer(
{
minFont:10,
maxFont:20,
increment:1
}
);
});

Opções do fontResizer

Os valores default do plugin são:

  • sizeType. ‘px’
  • minFont. 12
  • maxFont. 16
  • fontSet. 14
  • setFontOn. ‘on’
  • increment. 2
  • incrementDisable. disabled’

Valores default do cookie:

  • cookieName. ‘fontResizer’
  • cookieExpire. cExpireDate

cExpireDate é o dia/mês em que o cookie é criado (1 ano para expirar). Variáveis usadas pelo cExpireDate” (sobreescritas quando o cookie expira ou quando um novo é criado):

  • var date = new Date()
  • var currYear = date.getFullYear()
  • var currMonth = date.getMonth()
  • var currDay = date.getDate()
  • var cExpire = new Date(currYear + 1, currMonth, currDay)
  • var cExpireDate = cExpire.toUTCString()
  • cookiePath: ‘/’

Conclusão sobre o fontResizer

Certamente quando um site possui um controle de tamanho dos textos, sua usabilidade e acessibilidade aumentam. Aumentando a usabilidade, a qualidade do site, como um todo, também aumenta. Portanto, ter esta opção é algo muitas vezes indispensável e, quando isso é possível com tamanha simplicidade e eficiência quanto permite o fontResizer, melhor ainda!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Deixe o seu comentário, participe!

3 Responses

  1. Olá.

    Gostaria de saber se há algo do gênero para implementar em blog. Muito obrrigado desde já. Parabéns pelo excelente trabalho desenvolvido.

    1. O fontResizer pode ser implementado em blogs tranquilamente. Basta seguir o tutorial e tudo dará certo!

      Abraços!

Leave a Reply to Tárcio Zemel Cancel reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.