防止在更改字体粗细时移动文本[重复]

Posted 2023-03-06

【中文标题】防止在更改字体粗细时移动文本[重复]

【英文标题】：Prevent to move text while changing its font-weight [duplicate]

【发布时间】：2017-04-13 14:19:47

【问题描述】：

我最近一直在研究很酷的设计。其中一项功能的工作方式是在选中复选框时，其字体变为粗体。问题在于，在改变字体粗细的同时，它会稍微移动其他元素。任何想法如何在不定位的情况下用绝对位置标记它。我创建了一个显示问题的片段。

li
  list-style:none;
  display:inline-block;
  margin-right:20px


input[type="checkbox"]:checked + label
font-weight:bold;

<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2
  </li>
</ul>

【问题讨论】：

可能很有帮助 - Inline elements shifting when made bold on hover，这个想法是在 :after 伪元素中为粗体（或任何 :hover 状态样式）内容保留空间，并使用标题标签作为内容源。跨度>

设置渲染文本的元素的宽度。

【参考方案1】：

也许你会尝试引导程序，用它你可以说：

<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>

或者你自己做，然后说： html:

    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>
    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>
    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>

css:

.myClass 
width:33.33333%;

希望我能帮到你:)

编辑 你也可以给一个 div 几个类：

<div class="myClass1 myClass2 myClass3">
</div>

因此您不必在每个 css 规则中添加宽度。

【讨论】：

对于这么小的问题，这有点矫枉过正。

是的，你是对的——但是当你习惯了这个过程时，你会发现容易得多

【参考方案2】：

您可以为此使用一个小的 CSS Hack。

就像（这将是特定字体）：

input[type="checkbox"]:checked + label
  font-weight: bold;
  display: inline-block;
  margin-right: -2.8px; /* cancel the margin on right that is produced */

看看下面的sn-p：

li
  list-style:none;
  display:inline-block;
  margin-right:20px


input[type="checkbox"]:checked + label
  font-weight: bold;
  display: inline-block;
  margin-right: -2.8px;

<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1</label>
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2</label>
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2</label>
  </li>
</ul>

希望这会有所帮助！

【讨论】：

当您希望为用户提供尽可能好的体验时，这可能是最好的解决方案，尽管在更改字体、大小等时很难维护。为努力而投票。

你是如何计算出 -2.8 的值的？

@user2277916 这取决于您在模板中使用的字体。这是通过计算“普通文本”与“粗体文本”的宽度之间的差异来完成的。进入上述示例的差异约为。 2.8 像素。我希望这会有所帮助！

【参考方案3】：

使用text-shadow 模拟效果：

li 
    list-style:none;
    display:inline-block;
    margin-right:20px


input[type="checkbox"]:checked + label
    text-shadow: 1px 0 0 currentColor;

<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2
  </li>
</ul>

【讨论】：

好主意 - 我喜欢！