使用 JavaScript 更改 *（所有内容）的字体大小

问题描述 投票：0回答：3

在我的项目中，我希望用户能够放大网页。但是由于 JS 的浏览器内缩放功能没有得到广泛支持，我想另一种缩放方法是更改

font-size: n%;
，因为我对所有与大小相关的东西都使用了 rem 单位。

如果我在 css 中更改 * 的字体大小，其他所有内容都会随着字体大小缩放。例如。： 

*{font-size: 110%;}
与将浏览器缩放更改为 110% 相同。

另外，我想使用 select > 选项在 50% 和 150% 之间进行选择。这样我就可以利用

onchange="this.value"


如何使用 Javascript 在 CSS 中更改 * 的字体大小/字体大小？

* (CSS) 我指的是页面上的每个元素，而不仅仅是 div、表单或 id。

javascript html css accessibility zooming
3个回答
4
投票

请不要这样做！

因为这是标记的可访问性，所以我不建议完全按照您的建议去做。

为用户提供增加字体大小的选项 - 大量奖励积分。

等量缩放页面上的所有内容 - massive no.

最大的问题是页面的宽度会随着字体大小的增加而增加。

这将导致水平滚动和垂直滚动，这是一个很大的禁忌！

为什么重要？

最有可能增加字体大小的人也可能是依赖屏幕放大镜的人。

双向滚动对于屏幕放大镜用户来说是一场噩梦，因为句子的一部分可能不在屏幕上。

对于有阅读障碍等的人来说也是一次糟糕的体验

他们经常努力确保自己不跳过一行，在阅读时不得不左右滚动会使这个问题变得更糟 100 倍。

为什么浏览器缩放对辅助功能有效？

增加所有内容的大小与使用浏览器缩放之间的区别在于，当您缩放浏览器时，它还会计算页面的有效宽度（以 CSS 像素为单位）。

因此，如果您将 1920 像素宽的屏幕放大 200%，它会将宽度显示为 960 像素，这将触发为平板电脑视图设计的任何媒体查询（例如）并相应地调整您的样式。

你应该做什么？

正如我一开始所说，让人们改变他们的字体大小 - 大加分！

但是，您应该做的不是缩放所有内容，而是应该确保页面上的所有容器都可以接受更大的字体大小，并在

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% 示例

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>

不要以相同的单位定义容器（作为一般规则），这样它们就不会超出页面的范围。

如果你这样做，你将使页面更易于访问，而不会引入通过强制用户向两个方向滚动而实际降低页面可访问性的问题。

1
投票
  • 将表单元素
    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
投票

因为我在每个元素上都使用了

rem
单位，所以我需要做的就是更改元素的字体大小。这是我用来为我计算的代码：

<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>

这是有道理的，因为 

rem
单位是相对于根字体大小的，即（默认 12px iirc）的字体大小值，不像 
em
单位是相对于其自身的字体大小值。见https://www.w3schools.com/cssref/css_units.php

提示：em 和 rem 单位在创建完美可扩展的布局方面非常实用！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.