Javascript 增加整个html文档（所有元素）的字体大小

我正在使用html/css制作一个大型网站。我把字体改成了Josephin Sans，现在所有的文字都变小了。是否有办法增加所有元素的字体大小（即12px变为13px，14px变为15px，20px变为21px，依此类推）

---

元素太多了，所以不可能对每个元素单独执行操作。

12px是12px是12px。你不能用css属性重新定义12px有多大。但是，如果用ems替换像素值，您可以做什么。一般来说，1em=16px，因此您可以计算用多少em替换每个像素值

在ems中设置所有内容后，可以将父元素设置为子元素的ems的某种乘数。我已经为您创建了一个示例来帮助您演示这一点

HTML:

JavaScript（用于简单地切换类）：

您可以使用以下选项：

function incrAllFontSize(){
  $("*").each(function(index, elem){
    var $this = $(this);//caching for perf. opt.

    var curr = $this.css("fontSize");//get the fontSize string
    if(curr != "" && curr != undefined){//check if it exist
      curr = curr.replace(/px$/, "");//get rid of "px" in the string

      var float_curr = parseFloat(curr);//convert string to float
      float_curr += 1;//actual incr

      var new_val = "" + float_curr + "px";//back to string
      $this.css("fontSize", new_val);//set the fontSize string
    }
  });
}

以及：

编辑

---

我完全忘了提到它使用jQuery。

您应该使用rems来避免此类问题。如果您使用rem、%或em作为字体大小，那么在html上重置字体大小值就可以了。如果使用像素，则必须逐一更新值和单位以避免再次出现这种情况：）编辑器应该具有查找字符串并替换字符串的功能。例如，搜索12px并将其替换为0.75em。。

body {
  font-size: 1.0em;
}

body.large {
  font-size: 1.5em;
}

.xs {
  font-size: 0.6em;
}

.s {
  font-size: 0.8em;
}

.m {
  font-size: 1.0em;
}

.l {
  font-size: 1.2em;
}

.xl {
  font-size: 1.4em;
}

$(".toggle").click(function(){
    $("body").toggleClass('large');
});

function incrAllFontSize(){
  $("*").each(function(index, elem){
    var $this = $(this);//caching for perf. opt.

    var curr = $this.css("fontSize");//get the fontSize string
    if(curr != "" && curr != undefined){//check if it exist
      curr = curr.replace(/px$/, "");//get rid of "px" in the string

      var float_curr = parseFloat(curr);//convert string to float
      float_curr += 1;//actual incr

      var new_val = "" + float_curr + "px";//back to string
      $this.css("fontSize", new_val);//set the fontSize string
    }
  });
}

$(document).ready(incrAllFontSize);