CODEWITHSUNDEEP
jquerycssfont-size
d-_-b
d-_-b

Reputation: 23161

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

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?

Upvotes: 8

Views: 18168

Answers (5)

eblue
eblue

Reputation: 109

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+'%'}); 

}

Upvotes: 1

Umer Farook
Umer Farook

Reputation: 368

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);  

       });
});

Upvotes: 21

lukeocom
lukeocom

Reputation: 3243

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.

Upvotes: 4

Andy Jones
Andy Jones

Reputation: 6275

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");

Upvotes: 8

dwarring
dwarring

Reputation: 4883

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>

Upvotes: 10

Related Questions