如何统一更改字体大小？

问题描述：

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

div2和div3有自己的CSS与字体大小等确定。有没有一种方法可以统一减少div1的字号？也就是说，采取div2和div3中定义的字体大小并将它们减少一下，例如2px？这与您如何在文字处理软件中将选定文本的大小减少1分相似。有什么建议么？

是JavaScript的一个选项，或者是你想只用CSS来实现这一目标？ – Borophyll 2012-07-11 02:36:42

@Borophyll：当然。我不明白为什么不。刚编辑我的问题。 – Legend 2012-07-11 02:37:48

答

我认为这是你想要什么：

演示：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; 
}

答

我不认为你可以用CSS来做到这一点，但如果有人知道如何好好教育我。

我能想到的唯一的解决办法是嵌套它们，以便与DIV2和DIV3元素不会得到受影响，这只会影响嵌套在DIV1元素DIV2和DIV3。

div.div2 { font-size:14px; } 
    div.div3 { font-size:12px; } 

    div.div1 div.div2 { font-size:12px; } 
    div.div1 div.div3 { font-size:10px; }

答

如果你设置字体大小的百分比或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元素的属性，设置其他字体的字体大小变得微不足道，因为100％= 10px。这也使得使用jQuery ui库轻松了许多，因为它们使用相同的字体大小的设置。

您希望将'div1'的'font-size'设置为像'16px'这样的绝对长度。如果你不''div1'要'继承'_its_父母的'font-size'（如果没有设置，它将依赖于用户的浏览器默认）。看看我的意思是：http://jsfiddle.net/flackend/aWXKB/也看到这个[CSS字体教程]（http://www.sitepoint.com/css-font-sizing-tutorial/） – 2012-07-11 02:47:21

@flackend好点。我倾向于将它留给浏览器的默认字体大小，在我的经验中，它几乎全部是相同的（至少我在跨浏览器测试时从未注意过任何令人生畏的字体大小）。未来需要注意的事情 – Dean 2012-07-11 02:57:05

@flackend - 根据您在评论中指出的内容，我已经修改了我的答案。 – Dean 2012-07-22 23:49:25

答

如果您在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 s就按比例改变。

答

基本思想使用javascript：

var divs = document.getElementsByTagName('div'); 
for(int i = 0; i < divs.Length; ++i) { 
    var element = divs[i]; 
    element.style.setAttribute('font-size', '2px'); //whatever you need to set it to 
}

以上将改变字体大小，每格。显然这可能不会为你做......但你可以做一些事情来修改代码。你可以用document.getElementById('id');让您的*格，然后设置样式的子节点

如何统一更改字体大小？

相关推荐