CSS - 增加页面字体大小

Question

14

可能是重复问题:
允许用户在网页中更改字体大小

我有一些网页，我希望用户可以点击一个图片，然后增加页面上所有内容的字体大小。这种操作是否可行？如果可以，怎么实现呢？

我知道浏览器内部有一些选项，但我想要实现的是在页面上直接完成此操作的方法。

- Villager

1

重复：https://dev59.com/jXNA5IYBdhLWcg3wn_Q1#892031 - Josh Stodola

3个回答

1

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

例如，本文描述了如何以编程方式更改CSS值。

- ChrisW

1

我认为你可以切换 CSS。

将所有字体大小放入单独的 CSS 文件中。然后复制该文件并更改字体大小。接着使用一段 JS 脚本来切换 CSS 文件。

有很多教程可以解释这方面的知识。这里是其中之一。

- marcgg

1

这是一种非常粗糙的方法，我永远不会使用。 - Josh Leitzel

为什么这样做？这很有趣，因为您可以为所有元素指定不同的字体大小，以控制您的网站外观。 - marcgg

像这样更改CSS文件实际上有点粗糙，使用在body标签上添加/删除的类会更好，因为它将是即时更新，而不必下载新文件来更改字体大小。 2）这种方法比针对整个网站进行字体调整更适用于小规模更改。为了实现这个小功能，编写大量额外的CSS代码显然是不划算的。最好如果您需要这个功能，则使用%或em等基于尺寸单位的方法，就像bigmattyh的答案所解释的那样，并将这个方法留给小规模的切换工作。

- Jimbo Jonny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Howell · Accepted Answer

实现这个需要三件事：

在<body>标签中指定整体字体大小。例如：

body { font-size: 100%; }

不要在文档中的其他地方使用像素来指定字体大小。

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

使用jQuery为此图像附加事件处理程序，以相应地调整字体大小：

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

完成。