如何根据用户选择全局更新字体大小？答案

【问题标题】：How to globally update font-size based on user selection?如何根据用户选择全局更新字体大小？
【发布时间】：2019-01-26 01:52:26
【问题描述】：

我希望用户可以选择整个应用程序的字体大小，即三个选项：大、中、小。如果用户选择“大”，则应用程序的整体字体大小会相应地全局调整大小。 I have researched on this issue for quite some time but have not been able to find a solution to globally resize all the fonts (for example when "Big" is selected, all of the fonts would get x-倍大）

【问题讨论】：

标签： javascript css fonts font-size

【解决方案1】：

您应该为html 标签设置font-size，然后，对于其他选择器，使用带有rem 或em 的font-size。我更喜欢rem。 rem 是根据html font-size 计算的。之后，您可以通过添加类来更改html font-size。

【讨论】：

【解决方案2】：

我认为实现这一点的最简单方法是在 body 元素上设置基于像素的字体大小，并为其他元素使用 em 单位，以便它们的字体大小将相对于 body 元素之一。

然后你添加你的按钮，当有人点击它们时，让它们通过 JavaScript 改变 body 元素的字体大小。使用 em 值的元素的字体大小会相应改变

【讨论】：

【解决方案3】：

您可以尝试以下方法：

CSS

:root {
  --font-size: 20px;
}
div {
  font-size: var(--font-size);
}

document.documentElement.style.setProperty('--font-size', '16px');

在 html 元素上设置字体大小，然后用 em 引用它也可以：

html {
  font-size: 16px;
}
html.big {
  font-size: 20px;
}
div {
  font-size: 1em;
}

【讨论】：