如何更改整個頁面的字體大小？

Question

幾乎所有的 CSS 類都已經用靜態值設置了 font-size。 例如：

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

如何將整個頁面的字體大小增加 110%？ 示例字體大小：16px -> 17.6 字體大小：14px -> 15.4

Answer 1

沒有簡單的方法可以做到這一點。

大小是絕對設置的，必須明確覆蓋。

最好的方法是重寫現有的 CSS 以使用相對大小（可能使用rem單位），然后您可以通過設置 html 元素的字體大小來縮放整個文檔的字體。

執行此操作的理想方法是編輯源樣式表。

快速而骯臟的方法是使用 JavaScript 執行此操作，但會遍歷所有現有規則集，檢查字體大小文件並重寫它。

 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>

我強烈建議在源頭修復它，而不是在瀏覽器中破解它。

Answer 2

是否可以為字體大小創建一個單獨的 CSS 文件並將該文件放在最后，以便此 CSS 文件覆蓋默認字體大小

Answer 3

叉@Quentin 的代碼，
嘗試以相同的比例更改所有元素的字體大小。

 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

除了更改每個樣式規則，還可以遍歷 DOM。 對於具有大量樣式和相對較小 DOM 的文檔，這種方法的強度較低。

簡單版：

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

此版本跟蹤原始字體大小，因此可以以不同的比例重新應用。 然后它可以綁定到用戶設置。

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