Question

在页面加载后，有没有办法使用JavaScript或jQuery将页面上的所有字体大小增加一定百分比？

Answer 1

缩放属性将影响所有其他属性，例如尺寸。并且它不会在所有浏览器中都受支持。最好的方法是减少使用一些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);  

       });
});

Answer 2

缩放整个页面是否会产生预期效果？（只是增加字体大小，有点不同）。

IE 5.5+, Opera, and Safari 4, and Chrome支持CSS zoom属性。对于Firefox，您可以使用-moz-transform: scale(2)。所以要缩放整个页面：

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

Answer 3

您是否尝试更改body元素的字体大小的CSS？

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

Answer 4

另一种方法是在em中指定字体大小。然后在页面加载时设置主体的字体大小，明确地或按百分比。我在这里说明了这个方法 - http://jsfiddle.net/uYjM5/ - 它使用了以下jQuery

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

和示例css

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

通过设置基本字体大小，您可以达到效果。如果您使用的是em，那么所有其他页面元素都将具有基于body标签的相对字体大小。安迪琼斯的方法完全符合你的要求。

Answer 5

我必须制作一个页面，它需要重新缩放所有内容并保持比例（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+'%'}); 

}

如何在页面加载后增加页面上的所有字体大小？

5 个答案: