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

【问题标题】：How can I increase all the font sizes on a page after the page loads?页面加载后如何增加页面上的所有字体大小？
【发布时间】：2013-03-29 23:57:13
【问题描述】：

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

【问题讨论】：

标签： jquery css font-size

【解决方案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);  

       });
});

【讨论】：

【解决方案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>

【讨论】：

不完全是我的想法，但这会很好。谢谢！

【解决方案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");

【讨论】：

您好，如果个别元素有自己的font-size 属性，这不是没有效果吗？

【解决方案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 方法完全符合您的要求。

【讨论】：

【解决方案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+'%'}); 

}

【讨论】：