css - 主体上的等宽字体打破了布局

Question

我正在使用 Toast为了在元素中有一个简单的网格系统。网站上的大部分文本都是等宽字体，所以我给 body 这样的字体:

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

例如，我给两个 div 类 .grid__col.grid__col--2-of-4。这使两个 div 的宽度增加了 50%，它们应该并排出现。但是，在 body 上设置了等宽字体后，布局就会中断。就好像这两个 div 是为了使它们彼此相邻而变宽一样。我可以手动设置 width: 49.8% 或类似的设置，这很有效。所以出于某种原因，等宽字体的 div 变宽了。

代码笔:https://codepen.io/tobiasger/pen/mdbwLrb

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

Answer 1

在底部它是一个“行内 block 之间的空间”问题，没有可靠的解决方案，因此许多新网格使用 flex 或其他。

然而，作为内联 block 网格的 Toast 网格使用负边距来部分缓解该问题。当您将正文字体切换为“等宽”时， block 之间的空间宽度会发生不同的变化，因此现有的负边距值不再有效。

以下是您可以用来更改字体的内容:

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