How can I increase all the font sizes on a page after the page loads?

jquery css font-size

17,457

Solution 1

Would zooming the entire page have the desired affect? (A little different that just increasing the font sizes).

The CSS zoom property is supported by IE 5.5+, Opera, and Safari 4, and Chrome. For Firefox, you can use -moz-transform: scale(2). So to zoom the entire page:

<body style="zoom:2; -moz-transform:scale(2);"> ... </body>

Solution 2

Zoom property will affect all other properties like dimensions. And also it will not be supported in all browsers. best way is to reduce using some jQuery code like follows

$(document).ready(function(){
       $('*').each(function(){
       var k =  parseInt($(this).css('font-size')); 
       var redSize = ((k*90)/100) ; //here, you can give the percentage( now it is reduced to 90%)
           $(this).css('font-size',redSize);  

       });
});

Solution 3

Have you tried changing the CSS for font-size for the body element?

// some_percent is the % increase... change accordingly
var current_size = $("body").css("font-size");
$("body").css("font-size", parseInt(current_size * some_percent) + "px");

Solution 4

another method is to specify your font sizes in em's. And then set the font-size of the body on page load, either explicityly or by percentage. I have illustrated this method here - http://jsfiddle.net/uYjM5/ - which uses the following jQuery

$('body').css({'font-size':'16pt'});

and example css

body{font-size:12px;}
p{font-size:2em;}

This achieves the effect you are after by setting the base font size. All the other page elements will already have relative font sizes based on the body tag, if you are using em's that is. Andy Jones method does exactly what you ask however.

Solution 5

I had to make a page where it needed to rescale everything and still keep the proportions (interactive book type webpage in Adobe Edge Animate). This is the function that I used when the document was ready and when it was resized.

function resizeWindow() {

     var h = $("#Stage_scene").height();
     var w = Math.floor(h*0.7685738684884714); //the number is the ratio
     var curentProcentege = (h/1170)*100; // 1170 is the page starting height
     $("#Stage_scene").width(w);
     $('body').css({'font-size':curentProcentege+'%'}); 

}

View more solutions

17,457

Author by

d-_-b

(your about me is currently blank)

Updated on July 27, 2022

Comments

d-_-b almost 2 years

Is there any way using JavaScript or jQuery to increase all the font sizes on the page by a certain percentage after the page loads?