CODEWITHSUNDEEP
javascriptcssvue.jssassfont-size
Noppadol
Noppadol

Reputation: 11

How can I change the font size in whole page?

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

Upvotes: 1

Views: 9781

Answers (4)

Jason Reiche
Jason Reiche

Reputation: 721

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

Upvotes: 2

yurenchen
yurenchen

Reputation: 2493

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>

Upvotes: 0

Quentin
Quentin

Reputation: 944205

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.

Upvotes: 3

Dennis
Dennis

Reputation: 538

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

Upvotes: 0

Related Questions