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

【问题标题】：Increment the font size of entire html document(all element)增加整个 html 文档的字体大小（所有元素）
【发布时间】：2017-04-30 17:12:49
【问题描述】：

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

元素太多了，所以不能单独为每个元素做。

【问题讨论】：

您应该使用 rems 来避免此类问题
如果您使用、rem、% 或 em 作为字体大小，则重置 html 上的字体大小值即可。如果您使用像素，则必须通过每个像素来更新值和单位以避免再次发生这种情况:) 您的编辑器应该具有查找字符串并替换它们的功能。例如搜索 12px 并将其替换为 0.75em ..

标签： javascript html css font-size

【解决方案1】：

你可以用这个：

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

编辑
我完全忘了提到这使用了 jQuery。

【讨论】：

【解决方案2】：

12px 就是 12px 就是 12px。您无法使用 css 属性重新定义 12px 的大小。但是，如果用 ems 替换您的像素值，您可以做什么。一般来说，1em = 16px，所以你可以用多少 em 来替换每个像素值。

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

HTML：

<div class="xs">Extra Small text</div>
<div class="s">Small text</div>
<div class="m">Medium text</div>
<div class="l">Large text</div>
<div class="xl">Extra Large text</div>

<button class="toggle">
Toggle
</button>

CSS：

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

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

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

【讨论】：