javascript - 如何更改整个页面的字体大小？

Question

几乎所有的 CSS 类都已经将 font-size 设置为静态值。例如:

font-size: 16px
font-size: 14px
etc.

如何将整个页面的字体大小增加 110%？例子字体大小:16px -> 17.6字体大小:14px -> 15.4

Answer 1

没有简单的方法可以做到这一点。

尺寸是绝对设置的，必须显式覆盖。

最好的方法是重写现有的 CSS 以使用相对大小(可能使用 rem 单位)，然后您可以通过设置 html 元素的字体大小来缩放整个文档中的字体。

执行此操作的理想方法是编辑源样式表。

快速而肮脏的方法是使用 JavaScript 执行此操作，但遍历所有现有规则集，检查字体大小文件，然后重写它。

for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule.type === CSSRule.STYLE_RULE) {
      // Support for recursing into other rule types, like media queries, left as an exercise for the reader
      const {
        fontSize
      } = rule.style;
      const [all, number, unit] = fontSize.match(/^([\d.]+)(\D+)$/) || [];
      if (unit === "px") {
        // Other units left as an exercise to the reader
        rule.style.fontSize = `${Math.round(number / 16)}rem`
      }
    }
  }
}

html {
  font-size: 1.4em;
}

p {
  font-size: 20px;
}

p span {
  font: 12px "Fira Sans", sans-serif;
}

x {
  /* No font rules at all */
  background: green;
}

<p>Hello <span>world</span></p>

我强烈建议在源代码中修复它，而不是在浏览器中破解它。