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

发布于 2024-12-27 03:53:25 字数 2143 浏览 3 评论 0原文

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

1.在一个线程中（CSS 字体大小：相对值与绝对值。使用哪个？），答案之一实际上是一个尚未回答的问题：[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字体= 100％，box2 = 1.2em。 box3 = .8em，box4 = 1.6em

现在，问题是 box 1 中的 Em 也传输到其所有子项，如果我错了，请纠正我，所以这意味着 box2 不完全是 1.2em，并且当我们得到了方框 4 的字体大小，很难说它是什么。而当我们使用 Pt 或 Px 时，它会保持我们希望的状态。

然而，Px 大小不灵活，当我坐在远离屏幕的地方时，我确实喜欢在浏览器菜单中使字体变大。让我们面对现实吧，这很方便。所以 Px 尺寸已经过时了。那么为什么不使用铂呢？浏览器差异有多大？

2.另一个线程有同样的问题（复合相对字体大小：一种采用子元素字体大小的干净方法，而不是父元素的字体大小），带有数字、计算 - - 更具解释性，没有正确的答案：

对于例如，如果我有：

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 似乎不再支持访问器。

这在概念上看起来很简单，我觉得答案就在我面前，但我已经为此苦苦挣扎了一段时间，但在任何地方都找不到答案。

请帮忙！此时，如果有人告诉我这是不可能的，并且可以继续使用像素值，我会很高兴地相信他们！

现在我的问题可能很明显了... 是否有更好的方法来使用相对字体大小（或任何相对大小 - 例如宽度，高度等 - 就此而言）而不影响子元素通过父元素？

原文

I am learning CSS, and was reading questions about Relative vs Absolute font-sizes on StackOverflow. I came across two threads.

1. In one thread (CSS font size: relative vs. absolute values. Which to use?), one of the answers is actually a question that hasn't been answered: [QUOTE]

Question, many here say that Pt are only for print. But isn't it nice to have a simple ability to make the text the size you want fast without remembering what DIV has what Em or % value. For example, when you have:

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

I know it is a kind of weird structure, but let's say that a layout needs a structure like that for graphic purposes and CSS image layering. So I would like to make box1 font = 100%, box2 = 1.2em. box3 = .8em, and box4 = 1.6em

Now, the problem is that Em from box 1 also transfers to all its children, correct me if I am wrong, so it means that box2 is not exactly 1.2em, and by the time when we get to box 4 font size it's really hard to say what it is. Whereas when we use Pt or Px it stays the way we want it to stay.

However, Px sizes, are inflexible and I do like to make the fonts larger in my browser's menu when I sit far away from the screen. Let's face it, it is convenient. So Px size is out. So why not use Pt? How big is the browser difference?

2. Another thread has the same question (Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element) with numbers, calculations - - more explanative, without a proper answer:

For example, if I have:

td { font-size: 1.3em }

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

and I have headings/paragraphs inside my table-cells, I know that I can avoid compounding the font-sizes by the following:

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

which would result in the headings/paragraphs in my table-cells having font-size of 1.3em (that of the td).

But what I'm looking for is a nice, clean way for each child element to have it's original font-size, not that of the parent.

I'd really like to avoid doing the following (and of course I'd like to avoid using 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

For anyone familiar with LESS, I'm using that and thought I should be able to use it to do the calculations for me, eg. using accessors:

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

This at least would use the original values to do the calculation but feels just as clumsy as the above and besides, it seems LESS no longer supports accessors anyway.

This seems so simple in concept, I feel like the answer's staring me in the face, but I've been banging my head against this for a while and can't find the answer anywhere.

Please help! At this point if someone tells me it can't be done and that it's OK to go ahead and use pixel values, I'll quite happily believe them!

It may be obvious now what my question is... Is there a better way to use relative font sizes (or any relative size -- like width, height, etc -- for that matter) without the child elements being effected by the parent element?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

方圜几里 2025-01-03 03:53:25

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

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

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

我还找到了这篇文章关于百分比和基于 em 的字体大小之间的差异。它有点旧，但百分比和 em 之间的比较仍然有效。

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

另外，正如 @JukkaK.Korpela 所说，表格通常不包含标题标签，这就是的内容。和<头部>元素是为了.

回复收藏 0 原文

青春有你 2025-01-03 03:53:25

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

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

回复收藏 0 原文

新雨望断虹 2025-01-03 03:53:25

第二个盒子正好是1.2em，但不一定是1.2rem。

rem 几乎与 em 相同，但它是 css3 的一部分，而且... （来自文档）

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

回复收藏 0 原文

娇纵 2025-01-03 03:53:25

对于 font-size，我可以想象的一种方法是指定 font-size 尽可能接近您想要设置 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>

For font-size, one way I can imagine of is by specifying the font-size as close to the element that you want to set font-size on as possible, and also you might need to introduce some other elements to by-pass the nesting rule.

For example for your code in question, for each piece of text wrap it with a span and then set font-size on the spans. As these spans are not nested, all the font-sizes are relative to box1, here is the result 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>

回复收藏 0 原文

~没有更多了~