使用JavaScript更改 *(所有内容)的字体大小

slmsl1lt 于 2023-03-06 发布在 Java

关注(0)|答案(3)|浏览(230)

在我的项目中，我希望用户能够放大网页，但由于JS的in-browser-zoom-function并没有得到广泛支持，我认为另一种缩放方式是改变font-size: n%;，因为我对所有与大小相关的东西都使用rem单位。
如果我在css中更改 * 的字体大小，其他所有内容都将随字体大小缩放。*{font-size: 110%;}与将浏览器缩放比例更改为110%相同。
另外，我希望使用select〉选项在50%和150%之间进行选择。

如何使用Javascript更改CSS中 * 的fontSize/font-size？

（CSS）指的是页面上的每个元素，而不仅仅是div、form或id。

JavaScript

来源：https://stackoverflow.com/questions/62969631/changing-fontsize-of-everything-with-javascript

3条答案

按热度按时间

4xy9mtcn1#

请不要这样做!

由于这是标记的可访问性，我不能建议完全按照您的建议。
为用户提供增大字体大小的选项-巨大的奖励积分。
将页面上的所有内容按等量缩放-大量不不。
这样做的一个大问题是，页面的宽度会随着字体大小的增加而增加。
这将导致水平滚动以及垂直滚动，这是一个很大的不不!

这有什么关系？

最有可能增大字体大小的人也可能是依赖屏幕放大镜的人。
双向滚动对屏幕放大镜用户来说是一场噩梦，因为句子的一部分可能会离开屏幕。
对于有阅读障碍的人来说，这也是一次糟糕的经历。
他们经常纠结于确保自己不会跳过一行，阅读时必须左右滚动，这让这个问题变得更糟100倍。

那么为什么浏览器缩放对辅助功能起作用呢？

增加所有内容的大小与使用浏览器缩放之间的区别在于，当您缩放浏览器时，它也会计算页面的有效宽度（以CSS像素为单位）。
因此，如果你将一个1920px宽的屏幕放大200%，它会显示出960px的宽度，这将触发任何为平板电脑视图设计的媒体查询（例如），并相应地调整你的风格。

你应该怎么做？

正如我在开始时所说，让人们改变他们的字体大小-大加分!
但是，您应该做的不是缩放所有内容，而是确保页面上的所有容器都可以接受您的较大字体大小，并将所有字体定义为em或rem。
这样你所需要做的就是改变<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%示例

一个二个一个一个
不要以相同的单位定义容器（作为一般规则），这样它们的缩放就不会超出页面的边界。
如果这样做，您将使页面更易于访问，而不会引入通过强制用户向两个方向滚动而实际降低页面可访问性的问题。

赞(0）回复(0）举报 2023-03-06

6ljaweal2#

将表单元素font或font-size设置为inherit（以便覆盖浏览器默认值）
如果元素具有相对字体大小，则只需控制body元素的字体大小
停止使用内联JS。使用Element.addEventListener()代替。当你不在HTML标签中使用它时，调试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>

赞(0）回复(0）举报 2023-03-06

icnyk63a3#

由于我在每个元素上都使用rem单位，所以我所需要做的就是改变元素的字体大小，下面是我使用的代码：

<html id="html" style="font-size: 100%;">
  <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>
  
  <p style="font-size: 1rem;">Example text</p>
</html>

这是有意义的，因为rem单位是相对于根字体大小的，即字体大小值（默认为12 px iirc），而em单位是相对于自身的字体大小值。
提示：em和rem单位在创建完美的可缩放布局方面非常实用！

赞(0）回复(0）举报 2023-03-06

我来回答

使用JavaScript更改 *(所有内容)的字体大小

3条答案

请不要这样做!

这有什么关系？

那么为什么浏览器缩放对辅助功能起作用呢？

你应该怎么做？

字体大小100%示例

字体大小150%示例

相关问题

热门标签

最新问答