页面加载后如何增加页面上的所有字体大小？
Posted
技术标签:
【中文标题】页面加载后如何增加页面上的所有字体大小？【英文标题】：How can I increase all the font sizes on a page after the page loads? 【发布时间】：2013-03-29 23:57:13 【问题描述】：有没有什么方法可以在页面加载后使用 javascript 或 jQuery 将页面上的所有字体大小增加一定百分比？
【问题讨论】：
【参考方案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
bodyfont-size:12px;
pfont-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+'%');
【讨论】：
以上是关于页面加载后如何增加页面上的所有字体大小？的主要内容，如果未能解决你的问题，请参考以下文章