Как увеличить все размеры шрифта на странице после загрузки страницы?

есть ли способ с помощью JavaScript или jQuery увеличить все размеры шрифтов на странице на определенный процент после загрузки страницы?

8
css font-size jquery

5 ответов

будет ли масштабирование всей страницы иметь желаемый эффект? (Немного отличается от того, что просто увеличивает размер шрифта).

CSS zoom свойство поддерживается IE 5.5+, Opera, и Safari 4, и Chrome. Для Firefox, вы можете использовать -moz-transform: scale(2). Итак, чтобы увеличить всю страницу:

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

свойства Zoom будет влиять на все другие свойства, такие как размеры. А также он не будет поддерживаться во всех браузерах. лучший способ-уменьшить использование некоторого кода jQuery следующим образом 

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

       });
});
19

вы пробовали изменить CSS для размера шрифта для элемента body? 

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

другой метод-указать размер шрифта в em. А затем установите размер шрифта тела при загрузке страницы, либо explicityly, либо в процентах. Я проиллюстрировал этот метод здесь -http://jsfiddle.net/uYjM5/ - который использует следующий jQuery

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

и пример css

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

Это обеспечивает эффект, который вы после установки базового размера шрифта. Все остальные элементы страницы уже будут иметь относительные размеры шрифта на основе тега body , если вы используете их, который. Однако метод Энди Джонса делает именно то, что вы просите.

4

Я должен был сделать страницу, где нужно было масштабировать все и по-прежнему сохранять пропорции (интерактивная веб-страница типа книги в Adobe Edge Animate). Это функция, которую я использовал, когда документ был готов, и когда он был изменен. 

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

}
1