logo标签列表

CSS: font-size: inherit * 70%?

cssfont-size
10

有没有一种方法可以指定一个类的字体大小为继承字体大小的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做到这一点吗？
4个回答
16

像百分比一样，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单位的支持已经非常好*了。如果您还没有使用它，那么它值得一试。 根EM（rem）与根（文档）字体大小相结合，而与“普通”EM不同的是，它不受嵌套的影响-它始终与根字体大小相关联。虽然em对于大多数文本大小仍然非常有用，因为它能够考虑到嵌套，但rem对于像外边距和填充这样的东西非常有用，你可能不想随着嵌套而改变它们的大小（这是误对齐左边距的常见原因），但是你需要随着根html字体大小的变化而改变它们的大小（通常使用媒体查询）。

你可以在Design Shack上了解更多关于EM与REM的内容。

*)只有IE8是不支持它的常见浏览器（约5%）-如果需要支持IE8，则只需在rem声明之前包含一个等效的像素大小。

11
在CSS中，如果您使用相对单位，则默认相对于所继承的大小。这意味着，您可以将按钮的字体大小定义为“70%”。
另外还有两个相对于字体大小非常方便的单位：em和ex。1 em是字母“M”的宽度，1 ex是字母“x”的高度-显然也被继承。
您不应该像在例子中一样使用px作为字体大小。px不遵循屏幕的DPI。例如，在我的屏幕上，10px和26px都会很小。您应该使用“pt”，甚至从“em”开始。
此外，我一直发现将 body 元素的字体大小设置为 62.5%，然后在其他地方使用 em 单位最为有效。在大多数情况下，62.5% 相当于默认浏览器字体大小的 10pt。 - Ian
62.5％听起来对我来说很严厉。你有一个示例URL吗？我会很感兴趣看看它在这里的样子。我会提供截图作为回报。 - ypnos
更具体地说，1 em 是 大写 字母'M'的宽度。 - Henrik Paul
3
我无法理解0.7em与父元素大小的关系。 - Tom
@Tom：em 相对于当前字体大小。 - C. K. Young
em总是相对于父元素的字体大小。但0.7em并不等同于70%的大小。 - Treb
@Treb：[需要引用来源]（借用维基百科的说法） - Powerlord
1
<input style="font-size: 70%" class="button" type="submit" value="Go">

?

始终避免将代码放在页面上，尽量将其放在样式表中以便于维护和分离。 - John_
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接