如何统一改变字体大小？

Question

如果我有以下HTML：

<div class="div1">
   <div class="div2">
   </div>
   <div class="div3">
   </div>
</div>

div2和div3都有自己的CSS，定义了字体大小等。有没有办法可以统一地减小div1的字体大小？也就是说，采用在div2和div3中定义的字体大小，并将其减小例如2px？这类似于在字处理软件中使用Select All -> Ctrl + Shift + <将所选文本的大小减小1磅。有什么建议吗？

Answer 1

我想这就是你想要的：

演示：http://jsfiddle.net/SO_AMK/JjutY/

HTML：

<div class="div1">
   <div class="div2">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
   <div class="div3">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
    <button class="increaseFontSize">Increase Font Size</button>
</div>​

jQuery：

$(".increaseFontSize").click(function(){
        var fontSize = getFontSize($(".div3"));
        var newFontSize = fontSize + 2;
        $(".div3").css("font-size", newFontSize);
        return false;
});
function getFontSize(element) {
    var currentSize = $(element).css("font-size");
    var currentSizeNumber = parseFloat(currentSize);
    return currentSizeNumber;
}

​

Answer 2

如果您使用百分比或em设置字体大小，则可以，但不能使用像素。在下面的示例中，如果您更改div1字体大小，它将同时影响div2和div3。有关字体大小单位类型CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT的比较，请参阅本文

.div1{
    font-size:16px;
}

.div2{
    font-size:80%;
}

.div3{
    font-size:90%;
}

下面是我在我的网站中用来设置字体大小的方法：

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

通过设置与body元素类似的font-size属性，将其他所有内容的font-size设置为100% = 10px变得非常简单。这也使得使用jQuery ui库变得容易得多，因为它们使用相同的字体大小设置。

Answer 3

如果在ems中设置内部div的字体大小，这是微不足道的。如果你有这个..。

.div2 {
    font-size: 1.8em; /*180% of inherited font-size */
}

.div3 {
    font-size: 1.4em; /*140% of inherited font-size */
}

..。如果你改变了DIV1的font-size，那么.div2和.div3的font-size就会成比例地改变。