html - 为什么字体家族偶尔会在按钮之间添加1px的间距？

请仔细阅读问题。它与有关How to remove the space between inline-block elements的内容不同。

考虑以下HTML:

body {
  /* font-family: Arial; */
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 20px;
}

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

产生:

但是，如果我添加:

body {
  font-family: Arial;
}

它导致第二个和第三个按钮之间有1px的间距:

问题是:为什么在font-family中添加body会影响按钮之间的间距？

最佳答案

发生这种情况是因为每种字体都有不同的宽度，即使对于空格字符也是如此。您已经了解内联块的空白问题。因此，当您设置Arial时，这些空格的宽度会与浏览器的默认字体(或其他具有不同宽度的字体)稍有不同，在我的情况下为Times New Roman。

看看设置等宽字体时所做的更改有多大。

现在，为什么发生在第二个和第三个盒子之间，而不是第一个和第二个盒子之间？我很确定它可以归结为根据输入的单词的宽度舍入像素值，似乎在背景中存在伪子像素渲染，而十进制值在最终渲染过程中被舍入。查看使用Arial并打印“ hell 堆栈溢出”而不是“Hello堆栈溢出”会发生什么情况-间隙看起来相同。因此，这只是不希望的巧合。

证明这是一个四舍五入问题的另一点是，各个页面缩放级别之间的差距发生了变化。在HTML中处理小数时，在布局中获得这些像素不匹配是很常见的。缩放增加了另一个除法/乘法阶段，这进一步改变了核心值，从而导致最终布局中的行为完全不可预测。