使用 JavaScript 更改 *（所有内容）的 fontSize
[英]Changing fontSize of * (everything) with JavaScript
问题描述
在我的项目中，我希望用户能够放大网页。 但是由于 JS 的浏览器内缩放功能没有得到广泛支持，我想另一种缩放方法是更改font-size: n%; 因为我对所有与尺寸相关的东西都使用了 rem 单位。
如果我在 css 中更改 * 的字体大小，其他所有内容都会随字体大小缩放。 例如： *{font-size: 110%;}与将浏览器缩放更改为 110% 相同。
此外，我想使用 select > 选项在 50% 和 150% 之间进行选择。 这样我就可以利用onchange="this.value"
如何使用 Javascript 更改 CSS 中 * 的字体大小/字体大小？
* (CSS) 我指的是页面上的每个元素，而不仅仅是 div、form 或 id。
编辑：
当我在每个元素上使用 REM 单位时，我需要做的就是更改 root/<html> 元素的 fontSize。 这是我用来为我解决的代码：
<html id="html">
----------------
<select onchange="document.getElementById('html').style.fontSize = this.value;">
<option value="125%">125%</option>
<option value="120%">120%</option>
<option value="115%">115%</option>
<option value="110%">110%</option>
<option value="105%">105%</option>
<option value="100%" selected>100%</option>
<option value="95%">95%</option>
<option value="90%">90%</option>
<option value="85%">85%</option>
<option value="80%">80%</option>
<option value="75%">75%</option>
</select>
2 个解决方案
解决方案1
3 2020-07-18 14:57:25
请不要这样做！
由于这是标记的可访问性，我不建议完全按照您的建议进行操作。
为用户提供增加字体大小的选项 -大量奖励积分。
等量缩放页面上的所有内容 -大量不不。
最大的问题是页面会随着字体大小的增加而增加。
这将导致水平滚动和垂直滚动，这是一个很大的禁忌！
为什么这有关系？
最有可能增加您的字体大小的人也可能是依赖屏幕放大镜的人。
双向滚动对于屏幕放大镜用户来说是一场噩梦，因为句子的一部分可能不在屏幕上。
对于有阅读障碍等的人来说，这也是一种糟糕的体验。
他们经常努力确保他们不会跳过一行，在阅读时不得不左右滚动会使这个问题变得更糟 100 倍。
那么为什么浏览器缩放对可访问性起作用呢？
增加所有内容的大小和使用浏览器缩放之间的区别在于，当您缩放浏览器时，它还会以 CSS 像素计算页面的有效宽度。
因此，如果您将 1920 像素宽的屏幕缩放 200%，它将显示宽度为 960 像素，这将触发为平板电脑视图设计的任何媒体查询（例如）并相应地调整您的 styles。
你该怎么办？
正如我一开始所说，让人们改变他们的字体大小 - 大加分！
但是，您应该做的不是缩放所有内容，而是应该确保页面上的所有容器都可以接受更大的字体大小并在em或rem中定义所有 fonts 。
这样，您需要做的就是更改<HTML>字体大小，页面上的每个字体都将缩放相同的数量。
如果您将 HTML 单位设置为百分比，它也会遵循用户字体大小设置。
在以下示例中，您只需将 HTML 从 100% 更改为 150%，所有字体大小都会增加而不会影响容器大小等。
下面的示例还说明了如果您增加字体大小并且容器在 150% 字体大小时不允许足够的空间会发生什么。
还可以尝试以下示例，将浏览器字体大小设置为最大，您将看到文本缩放而不影响容器大小。
字体大小 100% 示例
html{ font-size: 100%; } h1{ font-size: 3rem; } p{ font-size: 1rem; }.container{ width: 33%; background-color: #ddd; overflow: hidden; }
<div class="container"> <h1>Heading</h1> <p>text</p> </div>
字体大小 150% 示例
html{ font-size: 150%; } h1{ font-size: 3rem; } p{ font-size: 1rem; }.container{ width: 33%; background-color: #ddd; overflow: hidden; }
<div class="container"> <h1>Heading</h1> <p>text</p> </div>
不要以相同的单位定义容器（作为一般规则），这样它们就不会超出页面的范围。
如果您这样做，您将使页面更易于访问，而不会引入通过强制用户向两个方向滚动而实际上降低页面可访问性的问题。
解决方案2
1 2020-07-18 14:37:34
- 将表单元素
font或font-size设置为inherit（以覆盖浏览器默认值） - 如果您的元素具有相对字体大小，则只需控制
body元素的字体大小 - 停止使用内联 JS。 请改用
Element.addEventListener()。 当您不使用带有 HTML 标签的 JS 时，调试 JS 会更容易。
document.querySelector("#fontSize").addEventListener("input", function() { document.body.style.fontSize = this.value +"%"; });
h1 { font-size: 4em; /* Demo */ } input, textarea, button { font: inherit; /* override browser defaults */ }
<label><input id="fontSize" type="range" min="10" max="2000" step="1" value="100"></label> <h1>H1 title</h1> <p>Lorem ut florem</p> <blockquote> blockquote </blockquote> <form> <input type="text" value="Lorem ut florem"> <button type="button">Button</button> </form>
使用Javascript更改类的fontSize
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.