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

Question

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

元素太多，所以不可能对每个元素单独做。

Answer 1

12px就是12px就是12px。你不能用 css 属性重新定义 12px 有多大。但是，如果用 em 替换像素值，您可以做什么。一般来说，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（用于简单地切换 class）：

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

Answer 2

你可以使用这个：

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.

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

Increment the font size of entire html document(all element)

html

javascript

css

font-size