1

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

Noppadol
  • 11
  • 1
  • 4
  • 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 Aug 09 '19 at 08: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 Aug 09 '19 at 08: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 Aug 09 '19 at 08:22
  • @Noppadol You can use, body{ font-size: 14px; } in internal or external CSS for changing font size of whole page. – Sandeep Aug 09 '19 at 08: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 Aug 09 '19 at 08:25
  • https://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what Percentages might be tricky. `font-size: 110%` may have a different output from what you might expect – Sharon Aug 09 '19 at 08:29
  • font-size % is a percentage of the default size (of the body) which may or may not differ by browser if you don't set the actual size for body – Sharon Aug 09 '19 at 08:32
  • @Noppadol Do you need it done by css directly or can you use javascript/jquery in your project? (Dynamically getting each element, getting the font size and resetting font size as fontsize *1.1?) – Sharon Aug 09 '19 at 08:38

4 Answers4

2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

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);
Jason Reiche
  • 601
  • 6
  • 10
0

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

Dennis
  • 528
  • 3
  • 24
  • I think this way is possible but i have to change all css class that use font size with px. I don't know there are anyway to push some javascript or css that will change the size without change fontsize directly. – Noppadol Aug 09 '19 at 08:33
0

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>
yurenchen
  • 1,897
  • 19
  • 17