为什么 font-family 偶尔会在按钮之间增加 1px 的间隙? [英] Why font-family sporadically adds 1px gap between buttons?

问题描述

请仔细阅读问题.这与关于如何去除内联块元素之间的空格不同.

考虑以下 HTML:

body {/* 字体系列:Arial;*/}.我的课 {显示:内联块；边距:0 0 0 -4px；背景色:透明；边框:1px 实心 #ccc；填充:20px；}

<button class="my-class">你好</button><button class="my-class">Stack</button><button class="my-class">溢出</button>

产生:

但是，如果我添加:

body {字体系列:Arial；}

它会在第二个和第三个按钮之间产生 1px 的空间:

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

解决方案

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

看看当你设置等宽字体时变化有多大.

现在，为什么它发生在第二个和第三个盒子之间而不是第一个和第二个盒子之间?我很确定它归结为根据输入的单词的宽度对像素值进行四舍五入，似乎背景中存在伪子像素渲染，但在最终渲染过程中会四舍五入十进制值.看看如果您使用 Arial 并打印 Hell Stack Overflow 而不是 Hello Stack Overflow 会发生什么 - 差距看起来是一样的.所以，这只是一个不受欢迎的巧合.

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

Please read the question carefully. It's not the same as the one about How to remove the space between inline-block elements.

Consider the following 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>

Which produces:

But, if I add:

body {
  font-family: Arial;
}

it results in a 1px space between the second and third buttons:

The question is: Why adding font-family to the body affects the space between the buttons?

解决方案

It happens because each font has different width, even for the space character. You already know about the whitespace issues with inline-blocks. So, when you set Arial, those whitespaces change their width slightly from the browser's default font (or any other font with different width), which is Times New Roman in my case.

See how drastic the change is when you set the monospace font.

Now, why it happens between the 2nd and the 3rd box and not the 1st and the 2nd one? I'm pretty sure it comes down to rounding pixel values based on the width of the words entered, seems like there is a pseudo sub-pixel rendering present in the background, yet the decimal values get rounded in the final render process. See what happens if you use Arial and print Hell Stack Overflow instead of Hello Stack Overflow - the gaps look the same. So, it's just an undesired coincidence.

Another point that proves this is a rounding issue is the change in the gaps across various page zoom levels. It's fairly common to get these pixel mismatches in the layout when dealing with decimals in HTML. Zooming adds another dividing/multiplication stage, which changes the core values even further, resulting in completely unpredictable behaviour in the final layout.

这篇关于为什么 font-family 偶尔会在按钮之间增加 1px 的间隙?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！