javascript - How can I change the font size in whole page? - Stack Overflow

admin管理员组

文章数量:1336367

Almost of all CSS classes are already set font-size with static value. For example:

font-size: 16px
font-size: 14px
etc.

How can I increase font size of whole page with 110%? Example font-size: 16px -> 17.6 font-size: 14px -> 15.4

Almost of all CSS classes are already set font-size with static value. For example:

font-size: 16px
font-size: 14px
etc.

How can I increase font size of whole page with 110%? Example font-size: 16px -> 17.6 font-size: 14px -> 15.4

• javascript
• css
• vue.js
• sass
• font-size

Share Follow edited Sep 2, 2024 at 6:13 Penny Liu 17.5k55 gold badges8686 silver badges108108 bronze badges asked Aug 9, 2019 at 8:15 NoppadolNoppadol 1111 silver badge44 bronze badges 8

• You can use class for where you were using font size and after that you can internal or external type off CSS to change font style. It can change automatically all page CSS where you use that class. – Sandeep Commented Aug 9, 2019 at 8:19
• But I have to add class to every element that I use font-size. Right ? I need some solution like put some lines of code at 1 place and it change all of page. – Noppadol Commented Aug 9, 2019 at 8:22
• When you say increase do you mean if a class has size 12 make it 14 and if it was 16 make 18 or do you want all text the same exact size? – Sharon Commented Aug 9, 2019 at 8:22
• @Noppadol You can use, body{ font-size: 14px; } in internal or external CSS for changing font size of whole page. – Sandeep Commented Aug 9, 2019 at 8:23
• @Sharon Yeah ! Something likes that. I need to change the font to 110% of whole project. And I want to just push some magic tricks at 1 place and it will change all of it – Noppadol Commented Aug 9, 2019 at 8:25

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

There is no easy way to do this.

The sizes are set absolutely and have to be overridden explicitly.

The best approach would be to rewrite the existing CSS to use relative sizes (probably using the rem unit) and then you can scale the fonts across the entire document by setting the html element's font size.

The ideal way to do this would be to edit the source stylesheet.

The quick and dirty approach would be to do this using JavaScript but looping over all the existing rulesets, checking for a font size file, and rewriting it.

for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule.type === CSSRule.STYLE_RULE) {
      // Support for recursing into other rule types, like media queries, left as an exercise for the reader
      const {
        fontSize
      } = rule.style;
      const [all, number, unit] = fontSize.match(/^([\d.]+)(\D+)$/) || [];
      if (unit === "px") {
        // Other units left as an exercise to the reader
        rule.style.fontSize = `${Math.round(number / 16)}rem`
      }
    }
  }
}

html {
  font-size: 1.4em;
}

p {
  font-size: 20px;
}

p span {
  font: 12px "Fira Sans", sans-serif;
}

x {
  /* No font rules at all */
  background: green;
}

<p>Hello <span>world</span></p>

I strongly suggest fixing it at source rather than hacking it in the browser though.

Instead of changing every style rule, it is also possible to walk the DOM. This approach can be less intensive for documents with lots of styles and a relatively small DOM.

Simple version:

function changeFontSize(element){
    var currentSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
    if (currentSize) {    
        currentSize = parseFloat(currentSize.replace("px",""));
        element.style.fontSize = (currentSize * 1.2) + "px";
        for(var i=0; i < element.children.length; i++){
            changeFontSize(element.children[i]);
        }
    }
}
changeFontSize(document.body);

This version tracks the original font size so it can be reapplied at different ratios. It could then be tied to an user setting.

const ratio = 1.2;
function changeFontSize(element){
    var originalSize = element.getAttribute("data-orgFontSize");
    const currentSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
    if (!originalSize) {
        originalSize = currentSize;
        element.setAttribute("data-orgFontSize", currentSize);
    }

    if (originalSize) {    
        const size = parseFloat(originalSize.replace("px",""));
        element.style.fontSize = (size * ratio)  + "px";
        for(var i=0; i < element.children.length; i++){
            changeFontSize(element.children[i]);
        }
    }
}
changeFontSize(document.body);

Is it maybe possible to create an seperate CSS file for the font-sizes and put that one last in line so that this CSS file overwrites the default font-sizes

fork @Quentin 's code,
Try to change all elements font-size in same ratio.

for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule.type === CSSRule.STYLE_RULE) {
      // Support for recursing into other rule types, like media queries, left as an exercise for the reader
      const { fontSize } = rule.style;
      const [all, number, unit] = fontSize.match(/^([\d.]+)(\D+)$/) || [];
      if (unit === "px") {
        // Other units left as an exercise to the reader
        rule.style.fontSize = `${number / 16}rem`
      }
    }
  }
}

function font_size_set(new_size){
  document.documentElement.style=`font-size: ${new_size}px`;
}

html {
  font-size: 1em;
}

p {
  font-size: 20px;
}

p span {
  font: 12px "Fira Sans", sans-serif;
}

x {
  /* No font rules at all */
  background: green;
}

<select onchange='font_size_set(this.value*16)' style="float:right">
  <option value=1>100%</option>
  <option value=1.5>150%</option>
  <option value=2>200%</option>
  <option value=3>300%</option>
</select>

<p>Hello <span>world</span></p>

本文标签： javascriptHow can I change the font size in whole pageStack Overflow