css - 正文上的等宽字体中断布局

我正在使用Toast以便在项目中具有简单的网格系统。该网站上的大多数文本将采用等宽字体，因此我为body指定了这种字体，如下所示：

body {
   font-family:"MonoSpaceFont", monospace;
}

然后，例如，我给两个divs .grid__col.grid__col--2-of-4的类。这使两个div的宽度为50％，它们应该彼此相邻出现。但是，在主体上设置等宽字体后，布局会中断。好像两个div是一个微调，以使其彼此相邻。我可以手动设置width: 49.8%或类似的设置来工作。因此，由于某些原因，div使用等宽字体变得更宽。

Codepen：https://codepen.io/tobiasger/pen/mdbwLrb

我以前从未遇到过这个问题。感觉像是个错误，但这也许是预期的行为吗？我想知道是否有任何方法可以解决此问题？

最佳答案

底部是一个“内联块之间的间距”问题，它没有固定的解决方案，因此许多新的网格都使用flex或其他方法。

但是，作为嵌入式块状网格的Toast网格使用负边距部分缓解了该问题。而且，当您将正文字体切换为“等宽字体”时，块之间的空格宽度将有所不同，因此现有的负边距值将不再起作用。

这是您可以用来更改字体的方法：

body {
  font-family: system-ui, sans-serif;
  &.u-font--monospace .demo-item{
	  font-family: monospace, monospace;
	  font-size: 1em;
  }
}

编辑：原始海报于7月25日在Github上。 https://github.com/daneden/Toast/issues/56

关于css - 正文上的等宽字体中断布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57711597/