使不同字体的行高一致

Question

我有语法高亮代码，可以混合使用固定字体和无衬线字体。

问题是它们有不同的高度：

.wrapper {
  float: left;
  border-bottom: 1px solid red;
  font-family: Arial, sans-serif;
}

.delim {
  font-family: Courier, fixed;
}

<div class="wrapper">
  <span class="delim">{</span>
  Content A
  <span class="delim">}</span>
</div>

<div class="wrapper">
  Content B
</div>

根据您的字体，您应该会看到如下内容：

我想让 A 和 B 排成一行，这样红线就显得是连续的了。

请注意，我不是问如何排列外框的底部，这只是为了有一个易于演示的 sn-p - 我的根本问题是当固定宽度时高度会发生变化添加字体内容。

如何保持一致，以使行高不会随着以不同字体添加的字符而改变？

Answer 1

您可以在两者上设置 line-height 以使其保持均匀。我在初始容器上添加了填充，只是为了给它一些喘息的空间。

https://jsfiddle.net/6frqxrf4/

<div class="wrapper">
  <span class="delim">{</span>
  Content A
  <span class="delim">}</span>
</div>

<div class="wrapper">
  Content B
</div>

<div class="wrapper">
  <span class="delim-a">{</span>
  Content C
  <span class="delim-a">}</span>
</div>

.wrapper {
  float: left;
  border-bottom: 1px solid red;
  font-family: Arial, sans-serif;
  line-height: 12px;
  padding-bottom: 3px;
}

.delim {
  font-family: Courier, fixed;
  line-height: 4px;
}

.delim-a{
  font-family: Palatino;
  line-height: 4px;
}

Answer 2

只需添加到您的.delim 类line-height: 0px;