非粗体文本占用粗体文本的空间

Question

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

如果没有设置固定宽度，是否有一种狡猾而干净的方式使文本占用粗体文本的大小而不实际为粗体？

我能想到的唯一方法是使粗体文本存在（导致文本在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;
}

Answer 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中居中。也许有人可以从这里接听？！

Answer 2

css letter-spacing怎么样？结果将接近所需的结果：

.tab
{
    letter-spacing: 1.5px;
}

.tab.active, .tab:hover 
{
    letter-spacing: normal;
}

jsfiddle example