CSS:font-size:inherit*70%？

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

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字体大小(通常使用媒体查询).

您可以在Design Shack上阅读有关EMs与REMs的更多信息.

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

Answer 2

在CSS中,如果给出相对单位,则默认情况下相对于您继承的大小.这意味着,您可以将按钮的字体大小定义为"70%".

还有另外两个相关单位方便的字体大小:em和ex.1 em是字母'M'的宽度,1是字母'x'的高度 - 显然也是继承的.

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