Question

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

/Users/macadmin8/geniussch/node_modules/https/index.js

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

Answer 1

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

Answer 2

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

大小是绝对设置的，必须明确覆盖。

最好的方法是重写现有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;
}

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

我强烈建议您从源头修复它，而不要在浏览器中对其进行破解。

Answer 3

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

Answer 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);

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

4 个答案: