Publicado em 18 de out.

Aumento proporcional de fontes da página

Estou postando este pequeno exemplo de como aumentar a fonte das tags html da página.

Estive procurando na internet e a maioria dos exemplos mostrava como aumentar ou diminuir o tamanho da fonte.

No entanto se tivéssemos na página um div com fonte 10px, uma table com fonte 15px, um p com fonte 8px, etc... ao utilizar esses scripts, todos ficavam com um único tamanho a partir dos cliques de aumentar ou diminuir.

O script abaixo respeita os tamanhos atuais e faz o incremento/decremento proporcionalmente.

Espero que ajude alguém e que os colegas contribuam para melhorá-lo.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

 <head>

 <title> Aumentando Fontes </title>

 <meta name="generator" content="editplus">

 <meta name="author" content="">

 <meta name="keywords" content="">

 <meta name="description" content="">

<script language="JavaScript">

<!--

/* ------------------------------------------------------

* Autor: Álvaro Paniago Gonçalves - 16.10.2008

* Objetivo: funcao para aumentar ou diminuir o texto

* proporcionalmente em todos os elementos

* da página

* @parametros: sinal (+ ou -)

* Como utilizar:

* onclick="tamanho('+')" para aumentar

* ou

* onclick="tamanho('-')" para diminuir

-----------------------------------------------------/

function tamanho(sinal)

{

// tags que receberá o efeito. Cadastre outras que lembrar

 var tgs = new Array('table','p','div', 'td', 'tr', 'thead', 'tfoot', 'th', 'h1', 'h2', 'h3','h4','h5');

 var d = document;

 if (!d.getElementById) return

 for ( i = 0; i < tgs.length; i++ )

 {

 quais = d.getElementsByTagName( tgs[ i ] );

 for ( j = 0; j < quais.length; j++ )

 {

 // extrai o tamanho da fonte atual

 // se a fonte for maior ou igual a 10, retorna 10px, 11px, 12px, etc

 // ou seja tem 4 carateres. Se for menor que 10, então retorna 9px, 8px, etc...

 // ou seja tem 3 caracteres. Por isso o substr(0,2) ou substr(0,1)

 // O parâmetro recebido (sinal) + ou - faz o velho jogo de sinais da

 // matemática + com + = + ou + com - = -, fazendo o incremento ou decremento

 if (quais[j].style.fontSize.length>=4)

 var tam = eval(quais[j].style.fontSize.substr(0,2) + sinal + 1);

 else

 var tam = eval(quais[j].style.fontSize.substr(0,1) + sinal + 1);

 

 // se no primeiro clique não pegar o tamanho da fonte atual

 // coloca 11px como padrão (geralmente o tamanho mais comum e utilizado)

 if (quais[j].style.fontSize.length==0)

 quais[j].style.fontSize = '11px';

 else if (tam<=0)

 quais[j].style.fontSize = '1px';

 else

 quais[j].style.fontSize = tam+'px';

 }

 }

}

//-->

</script>

 

<style>

/ coloquei este somente como exemplo /

td {

 font-family:Tahoma;

 font-size:11px;

}

</style>

</head>

 

<body>

<span style='font-family:Trebuchet MS; font-size:11px'>Letra: <span style="cursor:pointer" onclick="java script:tamanho('+')" title="Aumentar o tamano da letra">(+)</span> <span style="cursor:pointer" onclick="java script:tamanho('-')" title="Diminuir o tamanho da letra">(-)</span></span>

 

 

<h1 style='font-size:35px'>Titulo 1</h1>

<br><br>

 

<p style='font-size:25px; font-family:Verdana'>Texto da Tag P</p>

<br><br>

 

<div style='font-size:15px; font-family:Trebuchet MS'>Texto da Div com um tamanho diferente</div>

<br><br>

 

<table width='500' border='1'>

 <tr>

 <td>Linha 1 Coluna 1</td>

 <td>Linha 1 Coluna 2</td>

 <td>Linha 1 Coluna 3</td>

 <td>Linha 1 Coluna 4</td>

 </tr>

 <tr>

 <td>Linha 2 Coluna 1</td>

 <td>Linha 2 Coluna 2</td>

 <td>Linha 2 Coluna 3</td>

 <td>Linha 2 Coluna 4</td>

 </tr>

</table>

</body>

</html>

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<html> <head> <title> Aumentando Fontes </title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <script language="JavaScript">

var tgs = new Array('table','p','div', 'td', 'tr', 'thead', 'tfoot', 'th', 'h1', 'h2', 'h3','h4','h5'); var d = document; if (!d.getElementById) return for ( i = 0; i < tgs.length; i++ ) { quais = d.getElementsByTagName( tgs[ i ] ); for ( j = 0; j < quais.length; j++ ) { // extrai o tamanho da fonte atual // se a fonte for maior ou igual a 10, retorna 10px, 11px, 12px, etc // ou seja tem 4 carateres. Se for menor que 10, então retorna 9px, 8px, etc... // ou seja tem 3 caracteres. Por isso o substr(0,2) ou substr(0,1) // O parâmetro recebido (sinal) + ou - faz o velho jogo de sinais da // matemática + com + = + ou + com - = -, fazendo o incremento ou decremento if (quais[j].style.fontSize.length>=4) var tam = eval(quais[j].style.fontSize.substr(0,2) + sinal + 1); else var tam = eval(quais[j].style.fontSize.substr(0,1) + sinal + 1); // se no primeiro clique não pegar o tamanho da fonte atual // coloca 11px como padrão (geralmente o tamanho mais comum e utilizado) if (quais[j].style.fontSize.length==0) quais[j].style.fontSize = '11px'; else if (tam<=0) quais[j].style.fontSize = '1px'; else quais[j].style.fontSize = tam+'px'; } } }

font-family:Tahoma; font-size:11px; } </style> </head> <body> <span style='font-family:Trebuchet MS; font-size:11px'>Letra: <span style="cursor:pointer" onclick="java script:tamanho('+')" title="Aumentar o tamano da letra">(+)</span> <span style="cursor:pointer" onclick="java script:tamanho('-')" title="Diminuir o tamanho da letra">(-)</span></span> <h1 style='font-size:35px'>Titulo 1</h1> <br><br> <p style='font-size:25px; font-family:Verdana'>Texto da Tag P</p> <br><br> <div style='font-size:15px; font-family:Trebuchet MS'>Texto da Div com um tamanho diferente</div> <br><br> <table width='500' border='1'> <tr> <td>Linha 1 Coluna 1</td> <td>Linha 1 Coluna 2</td> <td>Linha 1 Coluna 3</td> <td>Linha 1 Coluna 4</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td>Linha 2 Coluna 3</td> <td>Linha 2 Coluna 4</td> </tr> </table> </body> </html>