正文分隔符布局上的等宽字体

Question

我正在使用Toast，以便在项目中拥有一个简单的网格系统。网站上的大多数文本都将采用等宽字体，因此我给出了这种字体body如下：

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

然后，例如，我给两个div.grid__col.grid__col--2-of-4类.这使两个div的宽度为50%，并且它们应该彼此相邻显示。但是，在正文上设置等宽字体后，布局会中断。好像这两个div是一个推动，让他们彼此相邻。我可以手动设置width: 49.8%或类似的它们，这有效。因此，出于某种原因，div 会随着等宽字体而变宽。

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

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

Answer 1

在底部，这是一个"内联块之间的空间"问题，它没有可靠的解决方案，因此许多新网格使用 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