非粗体文本占据粗体文本的空间[重复]

Posted 2023-03-06

【中文标题】非粗体文本占据粗体文本的空间[重复]

【英文标题】：Non-bold text to take the space of bold text [duplicate]

【发布时间】：2013-01-31 16:35:19

【问题描述】：

我正在使用 CSS 将一些单选按钮设置为选项卡。我希望“选定”选项卡的字体粗细为粗体。当然，这会导致选项卡的大小增加，因为文本占用更多空间。我想找到一种方法让文本从粗体变为非粗体，而“标签”不会改变大小

除了设置一个固定的宽度，有没有一种巧妙而干净的方法让文本占据粗体文本的大小而不实际是粗体？

我能想到的唯一方法是让粗体文本存在（导致文本在 html 中存在两次），但使用 visibility: hidden。

标记：

<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>

现在的相关 CSS：

.tab 
  display: block;
  font-size: 1.2em;
  height: 2em;
  line-height: 2em;
  margin-right: 1px;
  padding: 0 2em;
  position: relative;
  text-align: center;
  float: left;

.tab.active,
.tab:hover 
  font-weight: bold;

.tab input[type=radio] 
  display: none;

【问题讨论】：

文本阴影可以工作吗？

@zackt147，有趣的想法。不完全是我想要的（使阴影设置为相同颜色时文本的可读性降低），但我们最终可能会使用它（具有真正的阴影颜色）而不是粗体。感谢您的建议。

【参考方案1】：

还有一个使用 ghost 元素的解决方案。只需使用位于可见区域下方的粗体样式的相同文本：

HTML：

<div class="link">
    <div class="text">Sample Text</div>
    <div class="ghost">Sample Text</div>
</div>

CSS：

.link 
    border: 1px #000 solid;
    display: inline-block;


.link .ghost 
    color: transparent;
    font-weight: bold;


.link .text 
    position: absolute;
    text-align: center;


.link .text:hover 
    font-weight: bold;

这里是jsFiddle 来看看！

唯一需要注意的是可见文本不在外部 div 中居中。也许有人可以从这里接？！

【讨论】：

感谢您的建议。这实际上与我提出的将文本可见性设置为隐藏的位置相同。虽然这会起作用，但我希望找到一个不需要将标记中的文本加倍的解决方案。不过我会记住这个想法。

更好的解决方案是使用 CSS 的 content 属性与链接副本中的伪元素配对

jsfiddle.net/adqqC/8 -- 改进了上面的小提琴，让文本居中，通过删除位置：绝对，而不是使用高度 0 来表示重影，确保重影的顶部和底部填充也为 0。跨度>

【参考方案2】：

css letter-spacing 呢？结果将接近所需的结果：

.tab

    letter-spacing: 1.5px;


.tab.active, .tab:hover 

    letter-spacing: normal;

jsfiddle example

【讨论】：

好主意。如果没有更直接的方法，这将是一个不错的选择。