Alterando o tamanho da fonte do site

Sep 24

Meta Tags: Acessibilidade, JavaScript, Webstandards

Hoje iremos aprender como fazer um script para aumentar e diminuir o tamanho da fonte de seu site.

O script é bem simples e fácil de entender, porém temos que definir qual o tamanho padrão que iremos ter em nosso site.

Na maioria dos browsers - se não todos - utilizando 16px como tamanho de fonte padrão, podendo ser alterado pelo usuário caso prefira. Vamos trabalhar com o valor padrão, sem alteração.

Primeiro, iremos definir o tamanho padrão de fonte para o noso site. Optei por 0.69em (11px)

var tam = 69; //número inteiro e tamanho relativo "em"

Criaremos a função chamada mudaFonte recebendo o parâmetro obj. O parâmetro será utilizado para sabermos se foi clicado no a+ ou no a-

function mudaFontes(obj) {
    //conteudo do script
}

Iremos utilizar switch como nossa condição. Se for “+”, aumentaremos o tamanho e se for “-”, diminuiremos. Assim…

switch (obj) {
    case '+':
        tam = tam + 9;
        break;
    case '-':
        tam = tam - 9;
        break;
}

Por fim, ajustaremos o valor padrão de nossa div principal - ctPrincipal ou o nome que escolheu colocar em sua div - com o valor final que obteremos no script, dividiremos por 100 e adicionaremos “em” para indicar um valor relativo.

document.getElementById('ctPrincipal').style.fontSize = (tam / 100) + 'em';

Finalizando, nosso sript ficaria assim:

var tam = 69;
function mudaFonte(obj) {
    switch (obj) {
        case '+':
            tam = tam + 9;
            break;
        case '-':
            tam = tam - 9;
            break;
    }
    document.getElementById('ctPrincipal').style.fontSize = (tam / 100) + 'em';
}

Para ativar a função basta utilizar onclick=”mudaFonte(’+')” - para aumentar - e onclick=”mudaFonte(’+')” - para diminuir. Outras versões ou dicas são bem vindas nos comentários

Para ajudar no cálculo dos valores relativos das fontes, veja o tópico sobre o Em Calculator

Gustavo Ribeiro - Tableless, Acessibilidade e SEO