如何統一更改字體大小？

如果我有以下HTML：如何統一更改字體大小？

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

div2和div3有自己的CSS與字體大小等確定。有沒有一種方法可以統一減少div1的字號？也就是說，採取div2和div3中定義的字體大小並將它們減少一下，例如2px？這與您如何在文字處理軟件中將選定文本的大小減少1分相似。有什麼建議麼？

來源

2012-07-11 Legend

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

來源

2012-07-11 02:55:59

我不認爲你可以用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; }

來源

2012-07-11 02:35:50 DRTauli

如果你設置字體大小的百分比或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庫輕鬆了許多，因爲它們使用相同的字體大小的設置。

來源

2012-07-11 02:39:33 Dean

您希望將'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就按比例改變。

來源

2012-07-11 02:42:03 banzomaikaka

基本思想使用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');讓您的頂級格，然後設置樣式的子節點

來源

2012-07-11 02:44:46 Borophyll

如何統一更改字體大小？

回答

相關問題