Question

有没有办法指定一个类的字体大小，比如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>

在这两种情况下，我都希望按钮字体大小约为按钮所在范围或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年编辑：

值得指出的是，对于根EM单元的浏览器支持现在非常好*如果你还没有使用它，那么值得研究。 Root EM（rem）与根（文档）字体大小相关联，与“普通”EM不同，它不受嵌套影响 - 它始终与根字体大小相关。虽然em对于大多数文本大小调整仍然非常有用，但正是因为它尊重嵌套，rem对于边距和填充这样的东西很有用，你可能不会想要通过嵌套来改变大小（这是左边距错位的常见原因），但你做希望改变大小以及根html字体大小（通常使用{{3 }}）。

您可以阅读有关EMs与REMs media queries的更多信息。

*）IE8是唯一不支持它的常见浏览器（~5％） - 如果你需要支持IE8，只需在 {em}之前包含的等效大小 rem宣言。

Answer 2

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

另外还有两个适用于字体大小的相关单位：em和ex。 1 em是字母'M'的宽度，1是字母'x'的高度 - 显然也是继承的。

您不应该像在示例中那样使用px作为font-size。 px不遵守屏幕的DPI。例如，在我的屏幕上， 10px和26px都很小。你应该使用'pt'，或者甚至以'em'开头。

Answer 3

尝试：

font-size: 0.7em;

以下是一些更多信息：A {{{{P>

} How to Size Text in CSS

Answer 4

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

CSS：font-size：inherit * 70％？

4 个答案: