子元素的相对字体大小很棘手？答案

【问题标题】：Relative font sizes tricky on child elements?子元素的相对字体大小很棘手？
【发布时间】：2012-02-08 20:09:32
【问题描述】：

我正在学习 CSS，并在 StackOverflow 上阅读有关相对与绝对字体大小的问题。我遇到了两个线程。

1.在一个线程（CSS font size: relative vs. absolute values. Which to use?）中，其中一个答案实际上是一个尚未回答的问题：[QUOTE]

问题，这里很多人说 Pt 仅用于打印。但是，拥有一个简单的能力来使文本快速变成你想要的大小，而不记得什么 DIV 有什么 Em 或 % 值，这不是很好吗？例如，当您有：

<body>
 <div id="box1">
   test text sample1
   <div id="box2">
     test text sample2
     <div id="box3">
       test text sample3
        <div id="box4">
          test text sample4
        </div>
     </div>
   </div>
</div>

我知道这是一种奇怪的结构，但是假设布局需要这样的结构来实现图形目的和 CSS 图像分层。所以我想让box1 font = 100%, box2 = 1.2em。 box3 = .8em，box4 = 1.6em

现在，问题是来自 box 1 的 Em 也转移到了它的所有孩子，如果我错了，请纠正我，所以这意味着 box2 不完全是 1.2em，当我们到达 box 4 的字体大小时真的很难说它是什么。而当我们使用 Pt 或 Px 时，它会保持我们想要的样子。

但是，Px 大小不灵活，当我远离屏幕时，我确实喜欢在浏览器菜单中放大字体。面对现实吧，它很方便。所以 Px 大小已经过时了。那么为什么不使用铂呢？浏览器差异有多大？

2。另一个线程有相同的问题 (Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element) 与数字，计算 - - 更具解释性，没有正确的答案：

例如，如果我有：

td { font-size: 1.3em }

h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }

我的表格单元格中有标题/段落，我知道我可以通过以下方式避免混合字体大小：

td h2, td h3, td p { font-size: 1em }

这将导致我的表格单元格中的标题/段落的字体大小为 1.3em（td 的字体大小）。

但我正在寻找的是一种很好、干净的方式，让每个子元素都拥有原始字体大小，而不是父元素。

我真的很想避免做以下事情（当然我想避免使用 px）：

td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2

对于熟悉 LESS 的任何人，我正在使用它并认为我应该能够使用它来为我进行计算，例如。使用访问器：

td h2 { font-size: h2['font-size'] / td['font-size'] }

这至少会使用原始值进行计算，但感觉和上面一样笨拙，此外，似乎 LESS 不再支持访问器了。

这在概念上似乎很简单，我觉得答案在盯着我看，但我一直在努力解决这个问题，但在任何地方都找不到答案。

请帮忙！在这一点上，如果有人告诉我这无法完成并且可以继续使用像素值，我会很乐意相信他们！

现在我的问题可能很明显...... 有没有更好的方法来使用相对字体大小（或任何相对大小——如宽度、高度等）而没有孩子被父元素影响的元素？

【问题讨论】：

标签： html css font-size

【解决方案1】：

简短的回答 - 不，这不是 CSS 的工作原理。

更长的答案 - 如您所知，CSS 代表 Cascading 样式表。该级联的一部分是子元素将继承其父元素的属性。

我见过很多人使用的技术（包括 Dan Cederholm 在他的书 Bulletproof CSS 中，我推荐）是 make the base font size equivalent to 10px，而不是处理典型的默认基础字体大小为 16 像素。我不知道它对您的示例设计有多大帮助，但它可能有助于整体上使用基于 em 的字体。

我还发现了this article 关于百分比和基于 em 的字体大小之间的差异。有点老了，但是percent和em的比较还是有效的。

也就是说，现代浏览器会缩放整个页面，因此除非您必须支持 IE6，否则您可能能够避免使用像素字体大小，特别是如果您的设计确实需要如此复杂（因为如果您重新嵌套这么多元素并具有这么多不同的字体大小，可能有更好的设计方法。

另外，正如@JukkaK.Korpela 所说，表格通常不包含标题标签，这就是

和元素的用途。

【讨论】：

在 CSS 中使用过多的相对字体大小是否意味着页面加载缓慢（至少与使用绝对值相比），因为它们需要进行更多处理？
从技术上讲，它的加载速度可能会更慢，但是计算它的计算机会太快，除非您执行数千次，否则它可能并不重要。您最大的问题是 a) 可维护性（跟踪实际尺寸）和 b) 整体设计（大多数设计在尺寸或颜色等方面只有少量差异时最有效）。编写代码以使用 HTML 最佳实践可能会对加载速度产生比使用 em 与像素更大的影响。

【解决方案2】：

不，没有比将它们设置为相对于父元素的字体大小更好的方法来使用自适应（相对）字体大小。原因是它们被设计为以这种方式工作。如果这意味着创作中的计算量过多，那么真正的原因可能是整体设计过于复杂或您使用了过多的字体大小。

例如，通常表格不包含标题，除非您使用表格进行布局。有些人可能会说表格布局是他们的问题，但我宁愿说问题是设置表格的字体大小。你不需要这样做；您可以为表格内的不同元素设置字体大小，

【讨论】：

因此，在某种程度上，CSS 中太多的相对字体大小意味着页面加载缓慢（至少与使用绝对值相比），因为它们需要进行更多处理？对吗？
@Kr1s，我认为效率问题无关紧要。我指的是 authoring 中的计算，即如果嵌套元素具有自己的字体大小设置，作者需要进行一些计算以找到合适的因素。

【解决方案3】：

框二是正好是1.2em，但不一定是1.2rem。

rem和em几乎一样，不过是css3的一部分，而且是……(from the docs)

等于根元素上“font-size”的计算值。

当在根元素的“font-size”属性上指定时， “rem”单位是指属性的初始值。

【讨论】：

【解决方案4】：

对于字体大小，我能想到的一种方法是将字体大小指定为尽可能接近要设置字体大小的元素，并且您可能需要通过-通过嵌套规则。

例如，对于您有问题的代码，对于每段文本，使用 span 将其包装起来，然后在 span 上设置 font-size。由于这些 span 没有嵌套，所有的 font-size 都是相对于 box1，这里是结果https://jsfiddle.net/davenkin/pLype465/：

<div id="box1">
<span id="span1">test text sample1</span>
<div id="box2">
    <span id="span2">test text sample2</span>
    <div id="box3">
        <span id="span3">test text sample3</span>
        <div id="box4">
            <span id="span4">test text sample4</span>
        </div>
    </div>
</div>

【讨论】：