2

Tenho que aplicar o recurso de acessibilidade para aumentar e diminuir fonte. Atualmente tenho 3 botões: Fonte Pequena, Fonte Normal e Fonte Grande.

A ideia é que ao clicar em cada botão, seja chamada a respectiva função em javascript. E que a fonte aumente ou diminua para um determinado tamanho e pronto (não poder aumentar 2px a cada vez clicada por exemplo, era 12 foi direto pra 20 e para por ai).

O que está complicando é que se trata de um site grande, muitas classes, ids, muito conteúdo.

Pensei em realizar a alteração na fonte por meio do getElementsByTagName, porém uma mesma tag varia seu tamanho e espaço disponível de acordo com a página.

Por exemplo temos H1 com fonte 50 em uma página e que dá pra aumentar até 60, 70, mas também temos H1 com fonte 20 que aumenta até 30 (senão ultrapassa o tamanho da página e zoa tudo).

O que me resta de opção então? Fazer classe por classe?

2
  • 1
    Uma alternativa seria carregar dinamicamente o css usando javascript, carregando um arquivo que tenha todas as definições dos tamanhos. Commented 3/08/2018 às 18:00
  • Ricardo, obrigada pela ideia! Funcionou para o que eu queria. Commented 10/08/2018 às 17:08

3 Respostas 3

5

Se eu entendi o que você quer:

const btns = document.getElementsByTagName('button');

//Muda a fonte do corpo da página para 5px 
btns[0].addEventListener('click', () => document.body.style.fontSize = '5px');

//Muda a fonte do corpo da página para 20px
btns[1].addEventListener('click', () => document.body.style.fontSize = '20px');

//Muda a fonte do corpo da página para 35px
btns[2].addEventListener('click', () => document.body.style.fontSize = '35px');
/* Aqui define o tamanho base, não precisa ser em px */
body {
  font-size: 20px;
}

/* Os botões ficaram do mesmo tamanho idependentemente do tamanho */
button {
  font-size: 20px;
}

/* Os outros vão aumentar/diminuir proporcionalmente */
h1 {
  font-size: 1.5em
}
p {
  font-size: 1em
}
span {
  font-size: 0.5em
}
<body>
  <button> Pequeno </button>
  <button> Médio </button>
  <button> Grande </button>

  <h1>Texto grande</h1>
  <p>Texto médio</p>
  <span>Texto pequeno</span>
</body>

O em é uma unidade de medida que reflete o tamanho corrente da fonte, sendo 0.5em a metade do valor, 1em o mesmo valor, 2em o dobro do valor e assim sucessivamente

Aqui tem uma resposta sobre essas e outras unidades de medida do CSS

5
  • O ideal é isso mesmo, definir um tamanho base e os demais relativos a ele. Só que parece que o caso da pergunta é de um site que não foi construído pensando nisso.
    – bfavaretto
    Commented 3/08/2018 às 22:23
  • Acredito que uns Ctrl + H resolve isso
    – Costamilam
    Commented 3/08/2018 às 23:17
  • Tomara. Fica +1 na sua resposta
    – bfavaretto
    Commented 3/08/2018 às 23:19
  • Nesse caso, eu estaria com aquele problema de aplicar a alteração por tags. E em cada página, uma mesma tag tem um tamanho diferente, devido ao espaço disponível etc. Acabei criando um css alternativo e aplicando por uma função. Obrigada pela resposta. Commented 10/08/2018 às 17:03
  • @RecursodeAcessibilidade você pode usar classes (.pequeno, .medio, ...), usei tags apenas como exemplo,
    – Costamilam
    Commented 10/08/2018 às 22:11
3

Acredito que o mais simples será você trabalhar com variáveis no CSS e definir a propriedade font-size dos elementos que deseja mudar com base em sua variável.

Com JavaScript, basta você alterar o valor da variável no CSS que sua página se ajustará. Veja um exemplo, onde defini que o título <h1> será sempre o dobro da variável --font-size, enquanto os parágrafos serão a própria --font-size.

const buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function (event) {
    document.body.style.setProperty('--font-size', this.dataset.fontSize);
  });
}
body {
  --font-size: 1rem;
}

h1 {
  font-size: calc(2 * var(--font-size));
}

p {
  font-size: var(--font-size);
}
<button data-font-size="0.5rem">Pequena</button>
<button data-font-size="1.0rem">Normal</button>
<button data-font-size="2.0rem">Grande</button>

<h1>Titulo</h1>
<p>Texto</p>

2
  • 1
    Sempre vale aquele alerta: caniuse.com/#feat=css-variables
    – bfavaretto
    Commented 3/08/2018 às 18:18
  • Nesse caso, eu estaria com aquele problema de aplicar a alteração por tags. E em cada página, uma mesma tag tem um tamanho diferente, devido ao espaço disponível etc. Acabei criando um css alternativo e aplicando por uma função. Obrigada pela resposta. Commented 10/08/2018 às 17:03
0

Criei um css alternativo com as fontes maiores, personalizando cada classe da forma que eu queria e apliquei da seguinte forma:

<--! Defini  um id para o css externo atual--> 
<link href="estilos.css" rel="stylesheet" id="css">
//altero a variável css (que recebe o arquivo atual) para que ela receba css externo, com as fontes maiores
function fontegrande ()
{
  var css = document.querySelector('#css');
  css.setAttribute('href', 'estilosmaiorecontraste.css');
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .