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

FIDDLE

Answer 2

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

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

请参阅jsFiddle Demo。

Answer 3

px字体可以设置为50％，但不建议仅使用js。

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

body { font-size: 14px; }

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

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文件中定义所有样式。使用font-size类来切换font-size;例如：

//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

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

3 个答案: