如何更改整个页面的字体大小？答案

【问题标题】：How can I change the font size in whole page?如何更改整个页面的字体大小？
【发布时间】：2019-12-16 23:00:07
【问题描述】：

几乎所有的 CSS 类都已经用静态值设置了字体大小。例如：

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

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

【问题讨论】：

您可以在使用字体大小的地方使用类，然后您可以在内部或外部键入 CSS 以更改字体样式。它可以自动更改您使用该类的所有页面 CSS。
但是我必须为我使用字体大小的每个元素添加类。正确的？我需要一些解决方案，比如将一些代码行放在一个地方，然后它会改变整个页面。
当你说增加时，你的意思是如果一个类的大小为 12，则为 14，如果是 16，则为 18，或者您是否希望所有文本都具有相同的确切大小？
@Noppadol 你可以使用，body{ font-size: 14px; } 在内部或外部 CSS 中用于更改整个页面的字体大小。
@Sharon 是的！喜欢这样的东西。我需要将字体更改为整个项目的 110%。而且我只想在 1 个地方推出一些魔术，它会改变这一切

标签： javascript css vue.js sass

【解决方案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;
}

&lt;p&gt;Hello &lt;span&gt;world&lt;/span&gt;&lt;/p&gt;

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

【讨论】：

【解决方案2】：

是否可以为字体大小创建一个单独的 CSS 文件并将其放在最后一行，以便此 CSS 文件覆盖默认字体大小

【讨论】：

我认为这种方式是可能的，但我必须更改所有使用 px 字体大小的 css 类。我不知道有什么办法可以推送一些 javascript 或 css 来改变大小而不直接改变 fontsize。

【解决方案3】：

fork @Quentin 的代码，
尝试以相同的比例更改所有元素的字体大小。

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 = `${number / 16}rem`
      }
    }
  }
}

function font_size_set(new_size){
  document.documentElement.style=`font-size: ${new_size}px`;
}

html {
  font-size: 1em;
}

p {
  font-size: 20px;
}

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

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

<select onchange='font_size_set(this.value*16)' style="float:right">
  <option value=1>100%</option>
  <option value=1.5>150%</option>
  <option value=2>200%</option>
  <option value=3>300%</option>
</select>

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

【讨论】：

【解决方案4】：

除了更改每个样式规则之外，还可以遍历 DOM。对于具有大量样式和相对较小的 DOM 的文档，这种方法可能不太密集。

简单版：

function changeFontSize(element){
    var currentSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
    if (currentSize) {    
        currentSize = parseFloat(currentSize.replace("px",""));
        element.style.fontSize = (currentSize * 1.2) + "px";
        for(var i=0; i < element.children.length; i++){
            changeFontSize(element.children[i]);
        }
    }
}
changeFontSize(document.body);

此版本跟踪原始字体大小，因此可以以不同的比例重新应用。然后可以将其绑定到用户设置。

const ratio = 1.2;
function changeFontSize(element){
    var originalSize = element.getAttribute("data-orgFontSize");
    const currentSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
    if (!originalSize) {
        originalSize = currentSize;
        element.setAttribute("data-orgFontSize", currentSize);
    }

    if (originalSize) {    
        const size = parseFloat(originalSize.replace("px",""));
        element.style.fontSize = (size * ratio)  + "px";
        for(var i=0; i < element.children.length; i++){
            changeFontSize(element.children[i]);
        }
    }
}
changeFontSize(document.body);

【讨论】：