CSS: font-size:继承* 70%？

Question

有没有办法将类的字体大小指定为继承字体大小的70%？

我有一个通用的"button“类，用于设置带有适当边框、背景等的按钮。我在多个地方使用它，包括字体大小相当小的地方和字体大小相当大的地方。

<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>

在这两种情况下，我希望按钮的字体大小大约是按钮所在的span或div的字体大小的70%。

我能用纯CSS做到这一点吗？

Answer 1

EMs的工作方式类似于百分比，因为基本字体大小始终是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编辑：

值得指出的是，浏览器对Root EM单元的支持现在非常好*如果您还没有使用它，那么值得一试。Root EM (rem)与根(文档)字体大小相关，与“正常”EM不同，它不受嵌套的影响-它总是与根字体大小相关。虽然em对于大多数文本大小仍然非常有用，正是因为它支持嵌套，但rem对于诸如边距和填充之类的东西非常有用，您可能不希望通过嵌套来改变大小(这是导致左边界不对齐的常见原因)，但是您确实希望随着根html字体大小(通常使用media queries)一起改变大小。

您可以阅读有关EM与REMs over on Design Shack的更多信息。

*) IE8是唯一不支持它的常见浏览器(~5%) -如果您需要支持IE8，只需在rem声明之前包含等效大小(以像素为单位)。

Answer 2

在CSS中，如果给出一个相对单位，默认情况下它是相对于继承的大小的。这意味着，你可以将按钮的字体大小定义为"70%“。

还有另外两个相对的字体大小单位: em和ex。1em是字母'M‘的宽度，1ex是字母'x’的高度--显然也是继承的。

您不应该使用px作为font-size，如您的示例所示。px不服从屏幕的DPI。例如，在我的屏幕上，10px和26px都很小。你应该用'pt‘代替，甚至以'em’开头。

Answer 3

尝试：

font-size: 0.7em;

下面是更多信息：How to Size Text in CSS at A List