8

页面加载后，有什么方法可以使用 JavaScript 或 jQuery 将页面上的所有字体大小增加一定百分比？

4

5 回答 5

21

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

       });
});
于 2014-06-26T04:48:55.867 回答
10

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

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

<body style="zoom:2; -moz-transform:scale(2);"> ... </body>
于 2013-04-08T01:56:50.970 回答
8

您是否尝试过更改 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");
于 2013-04-08T01:45:48.103 回答
4

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

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

和示例 CSS

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

这通过设置基本字体大小来实现您所追求的效果。如果您使用的是 em，所有其他页面元素将已经具有基于 body 标记的相对字体大小。然而，Andy Jones 方法完全符合您的要求。

于 2013-04-08T03:09:44.223 回答
1

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

}
于 2013-06-25T12:46:19.677 回答