增加/减少/重置字体大小不起作用

我想在我的Web服务器上设置增加/减少/重置字体大小选项，但它似乎并没有工作。我希望所有的元素来调整（即标题，按钮，模态窗口等等）增加/减少/重置字体大小不起作用

这是到目前为止我的代码，我已经包含了这里的jsfiddle：http://jsfiddle.net/R3NGU/3/

var originalFontSize = $('.page').css('font-size'); 

// reset font size 

$(".resetFont").click(function() { 
    $('html').css('font-size', originalFontSize); 
}); 

// increase font Size 

$(".increaseFont").click(function() { 
    var currentFontSize = $('html').css('font-size'); 
    var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum * 1.2; 
    $('html').css('font-size', newFontSize); 
    return false; 
}); 

// decrease font size 

$(".decreaseFont").click(function() { 
    var currentFontSize = $('html').css('font-size'); 
    var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum * 0.8; 
    $('html').css('font-size', newFontSize); 
    return false; 
});

来源

2013-03-18 methuselah

那是因为你还硬编码字体大小在样式表中的其他元素。 – 2013-03-18 17:21:00

如果您要更改html字体大小，则页面内的所有元素必须使用除像素或点外的任何度量单位。 EM，REM和％是你的案例。 – 2013-03-18 17:31:18

相反的：

$('html').css('font-size', newFontSize);

使用wildcard all selector：

$('*').css('font-size', newFontSize);

jsFiddle example

来源

2013-03-18 17:23:00 j08691

如果您在html上定义了字体大小并将rem用作您网站其余部分的度量单位，则会使整个网站混乱。 – 2013-03-18 17:28:56

我用这个来降低所有字体大小为每个元素

jQuery('body').each(function(index) { 
    jQuery(this).find('*').each(function() { 

    var cur_size = jQuery(this).css('font-size'); 
    //alert(cur_size); 
    cur_size = cur_size.replace("px",""); 
    jQuery(this).css('font-size', (cur_size - 2)); 
    }); 
});

来源

2014-01-21 01:58:36 Ansyori

增加/减少/重置字体大小不起作用

回答

相关问题