如何使用 JavaScript 将所有字体动态减少到 50%

Question

我有一个网页，里面有各种字体大小，都使用px大小分配。我希望能够使用 JavaScript 将所有字体大小动态更改为原始大小的 50%。我尝试使用 CSS 规则，但意识到您无法更改具有 px 定义大小的字体大小。

Answer 1

var elems = document.querySelectorAll('*');
for (var i=elems.length; i--;) {
    var f_size = getComputedStyle(elems[i]).fontSize;
    var numb   = f_size.replace(/D/g,''); // the number
    var val    = f_size.replace(/d/g,''); // px
    elems[i].style.fontSize = (+numb / 2) + val;    
}

小提琴

Answer 2

如果jQuery是一个选项，这很简单：

$('*').css('font-size', function() {  
    return (parseInt($(this).css('font-size')) * 0.5);
});

请参阅jsFiddle演示。

Answer 3

px 字体可以设置为 50%，但不建议只使用 js 来做。

最常见的计划是您在 css 中定义基本字体大小，通常在正文上，例如：

body { font-size: 14px; }

以及用 em 定义的所有其他 elment;例如：

h2.titleExample {
    font-size: 2em; //this will be 28px for the base font-size is 14px
}

您可以使用JavaScript更改基本字体大小（jQuery示例）

function switchFS(fontSize) {
    $('body').css('font-size': fontSize);
};
switchFS('20px'); //or even swtichFS('2em');

或者你只在CSS文件中定义所有样式。 使用字体大小类来切换字体大小; 例如：

//css class
.font-normal { font-size: 14px; }
.font-large { font-size: 16px; }
.font-exlarge { font-size: 18px }
//js file
function switchFS(cls) {
    $('body').removeClass().addClass(cls);  
};
switchFS('font-large'); //call to get larger