在 Chrome 上设置 dt 元素副作用的字体

Question

当float: left用于将术语及其定义定位在同一行时，我在 Chrome 上为定义列表设置字体时看到了奇怪的效果。 这个小提琴说明了这种情况： https://jsfiddle.net/h6vp2knz/1/ 。

dd元素左侧的间距以看似混乱的方式变化。 如果定义足够长，需要多于一行，则第一行似乎与前一个术语的右侧对齐，下一行与定义对应的术语对齐，后续行与左侧对齐容器。

如果没有为术语设置font-family ，或者dt和dd元素都设置为具有相同的字体，那么一切看起来都如我所料：无论定义有多长，它都会在术语之后立即开始，并且所有后续行都开始从容器的左侧。 这也是我在 Firefox 上看到的。

我无法找出是什么导致了这种行为，但我很想知道这是怎么回事，以及为跨浏览器的术语和定义设置不同的 fonts 的好方法是什么。