时间戳

首页 > 解决方案 > 正文中断布局上的等宽字体

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

问题描述

我使用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

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

标签： cssmonospace

解决方案

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

推荐阅读