CSS - 增加页面字体大小

Question

可能重复:
允许用户更改网页中的字体大小

你好,

我有一些网页.我希望用户点击图片,并使页面上所有内容的字体大小增加.这可能吗？如果是这样,怎么样？

我知道浏览器里面有选项.基本上,我想在页面本身中做到这一点.

谢谢.

Answer 1

要实现这一目标的三件事:

指定<body>标记中的整体字体大小.例如:

body { font-size: 100%; }

不要使用像素在文档中的任何其他位置指定font-size.

p.somePara { font-size: 120%; }
p.anotherPara { font-size: 1.4em; }

将事件处理程序附加到此图像,以相应地调整字体大小.使用jQuery,例如:

$("#largerTextImage").click(function() {
  $("body").css("fontSize", "120%");
});

完成.

Answer 2

如果您增加顶级元素（例如）的字体大小<body>，那么该[更改的]大小将由其子元素继承（假设这些元素的其他 CSS 规则没有使用绝对值覆盖该大小，这也会搞乱了用户在浏览器中更改字体大小的行为）。

这篇文章（例如）说它描述了如何以编程方式更改 CSS 值。