CSS：font-size：inherit * 70％？

有沒有辦法指定一個類的字體大小，比如70％的繼承字體大小？CSS：font-size：inherit * 70％？

我有一個通用的「按鈕」類，用適當的邊框，背景等設置我的按鈕。我在多個地方使用它，包括字體大小相當小的地方和另一個字體大小相當的地方大。

<div style="font-size: 26px;"> 
Push this: <input class="button" type="submit" value="Go"> 
</div> 
<div style="font-size: 10px;"> 
Push this too: <input class="button" type="submit" value="Go"> 
</div>

在這兩種情況下，我想按鈕字體大小爲跨度的字體大小的約70％或DIV的按鈕是英寸

我能做到這一點純CSS？

來源

2008-11-17 Parand

EM的確可以像百分比一樣工作，因爲基本字體大小總是1em，而.7em會是70％（1.2em相當於基本字體大小的120％）。儘管您需要在文檔主體上定義基本字體大小，但要使其正常工作。通過實驗，我發現font-size：77％;在所有瀏覽器中給你一個很好的基本尺寸（就是說它使得1em呈現「正常」和可讀大小）。您可能希望嘗試使用75％到80％之間的其他值，具體取決於您要使用的字體系列。的同時也要記住的是，相對字體大小累計繼承 - 例如：

<style> 
small { font-size: .8em; } 
span.tiny { font-size: .8em } 
</style> 

<small>This text is 80% of base size where as 
    <span class="tiny">this text is 80% of 80% (or 64%) of base size</span> 
</small>

這個工作對你有利，你只需要給你的按鈕類.7em的字體大小，以達到你想要的東西（這些按鈕的字體大小始終爲其父對象的70％）。快樂的編碼！

2014編輯：

值得指出的根EM單元瀏覽器支持現在這麼好*，如果你還沒有使用它，它是值得探討。 Root EM（rem）與根（文檔）字體大小相關，與「正常」EM不同，它不受嵌套影響 - 它始終與根字體大小有關。雖然em對於大多數文本大小仍然非常有用，但正是因爲它對不尊重嵌套，所以rem對於邊距和填充等內容非常有用，您可能不希望通過嵌套更改大小（這是常見原因）不對齊的左邊距），但是您要做想要改變大小以及根html字體大小（通常使用media queries）。

你可以閱讀更多關於EMs與REMs over on Design Shack。

*）IE8是唯一通用的瀏覽器（約5％），其不支持它 - 如果你需要支持IE8，只需在像素同等大小的rem聲明之前。

來源

2008-11-17 12:57:13

嘗試：

font-size: 0.7em;

這裏的一些信息：How to Size Text in CSS在列表除了

來源

2008-11-17 08:12:33

我沒有看到0.7em如何與父母大小相關？ – Tom 2008-11-17 08:54:29

@Tom：em是相對於當前字體大小。 – 2008-11-17 09:15:50

em總是相對於父字體大小。但0.7em不會給你70％。 – Treb 2008-11-17 09:16:33

在CSS，如果你給一個相對單位，它是相對於你繼承的大小默認。這意味着，您可以將按鈕的字體大小定義爲「70％」。

另外還有兩個相對的字體大小：em和ex。 1 em是字母'M'的寬度，1是字母'x'的高度 - 顯然也是繼承的。

您不應該使用px作爲font-size，如您的示例中所示。 px不服從屏幕的DPI。例如在我的屏幕上，均爲 10px和26px會很小。您應該使用'pt'，或者甚至以'em'開頭。

來源

2008-11-17 08:14:35 ypnos

<input style="font-size: 70%" class="button" type="submit" value="Go">

？

來源

2008-11-17 08:29:04

CSS：font-size：inherit * 70％？

回答

相關問題