How can I change the font size in whole page?

Question

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

Answer 1

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.

Answer 2

是否可以为字体大小创建一个单独的 CSS 文件并将该文件放在最后，以便此 CSS 文件覆盖默认字体大小

Answer 3

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>

Answer 4

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