Question

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

元素太多，因此不可能为每个元素单独执行。

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

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

Answer 2

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

当在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');
});

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

2 个答案: