可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

To get a clear picture of what i am doing check this example or check the following code

This example is to change text size of h1, h2, p.

Is there a way in javascript/css that I can change text size of "body" that I can change the whole page text?

$(document).ready(function() {

  $("#small").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "24px"
    });
    $("h2").animate({
      "font-size": "16px"
    });
    $("p").animate({
      "font-size": "12px",
      "line-height": "16px"
    });

  });

  $("#medium").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "36px"
    });
    $("h2").animate({
      "font-size": "24px"
    });
    $("p").animate({
      "font-size": "16px",
      "line-height": "20px"
    });

  });

  $("#large").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "48px"
    });
    $("h2").animate({
      "font-size": "30px"
    });
    $("p").animate({
      "font-size": "20px",
      "line-height": "20px"
    });


  });

  $("a").click(function() {
    $("a").removeClass("selected");
    $(this).addClass("selected");

  });

});

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}
body {
  background: #e7e7e7;
}
#wrapper {
  width: 400px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
  float: right;
  padding: 2px;
  width: 25px;
  background: #333;
  position: fixed;
  margin: 0 0 0 440px;
  text-align: center;
  transition: .25s ease-out;
}
#controls a {
  font-size: 24px;
  color: #aaa;
  display: block;
  font-weight: bold;
  padding: 5px;
}
#controls a:hover {
  color: #fff;
  background: #000;
  transition: .25s ease-out;
}
a.selected {
  background-color: #294C52;
  color: #fff !important;
}
#small {
  font-size: 10px !important;
}
#medium {
  font-size: 16px !important;
}
#large {
  font-size: 20px !important;
}
.small {
  font-size: 75%;
}
h1 {
  font-size: 36px;
  font-weight: bold;
}
h2 {
  font-size: 24px;
  margin: 10px 0;
}
p {
  font-size: 14px;
  line-height: 20px;
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<body>

  <div id="wrapper">
    <div id="controls">
      <a href="#" id="small">A</a>
      <a href="#" id="medium" class="selected">A</a>
      <a href="#" id="large">A</a>
    </div>
    <h1>Header</h1>
    <h2>Subheader</h2>
    <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
  </div>

</body>

回答1:

Maybe it will be more convenient to use CSS and additional classes on body to change base font-size? Related these classes you also can change sizes of other elements without JavaScript/JQuery coding.

HTML

<button class="js-font" data-size="big">Bigger</button>
<button class="js-font" data-size="normal">Normal</button>
<button class="js-font" data-size="small">Smaller</button>

CSS

body, body.normal {
    font-size: 16px;
}
body.big {
    font-size: 36px;
}
body.small {
    font-size: 12px;
}

JQuery

$(function() {

    $('.js-font').on('click', function() {
        $('body')
            .attr('class', '')
            .addClass($(this).data('size'));
    });

});

See fiddle http://jsfiddle.net/shurshilin/94cnutdr/

Hop, it'll help you.

回答2:

You can actually accomplish this in a far simpler way than you may think.

By setting a starting font size on the body, you can set the font size of your other elements to use relative em units (1em = 1xbody font size in this case, so if the body font size is 14px, 1em = 14px). You can then use Javascript to increase / decrease the body font size, thereby impacting the relative font sizes of these elements.

Animation can be handled using a CSS transition alone.

$(document).ready(function() {
  $('#increase, #decrease').on('click', function() { // click to increase or decrease
    var btn = $(this),
      fontSize = parseInt(window.getComputedStyle(document.body, null).fontSize, 0); // parse the body font size as a number
    if (btn[0].id === "increase") { // detect the button being clicked
      fontSize++; // increase the base font size
    } else {
      fontSize--; // or decrease
    }
    document.body.style.fontSize = fontSize + 'px'; // set the body font size to the new value
  });
});

body {
  font-size: 14px;
}
h1,
h2 {
  transition: font-size 200ms; /* animate font size changes */
}
h1 {
  font-size: 2em; /* h1 element is 2x body font size */
}
h2 {
  font-size: 1.5em; /* h1 element is 1.5x body font size */
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<button id="increase">increase +</button>
<button id="decrease">decrease -</button>

<h1>Header 1</h1>

<h2>Header 2</h2>

回答3:

If you use font-sizes with unit 'em' everywhere except for the body, you can change the body font-size and all others will also change.

JSFiddle

$(document).ready(function() {
    $('.change-fs').click(function() {
        $('.body').css('font-size', $(this).attr('data-size'));
    });
});

.body {
    font: 400 10pt sans-serif;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size:1.5em;
}

p {
    font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="body">
    <h1>A header, really big</h1>
    <h2>A secondary header, still quite big</h2>
    <p>Normal text, default font-size</p>
    <div class="fs-ctrl">
        <div data-size="10pt" class="change-fs">10pt</div>
        <div data-size="12pt" class="change-fs">12pt</div>
        <div data-size="16pt" class="change-fs">16pt</div>
        <div data-size="20pt" class="change-fs">20pt</div>
    </div>
</section>