css - 使不同字体的行高一致

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 对齐，这样红线看起来是连续的。

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

我如何保持一致，以便在以不同字体向行中添加字符时，行的高度不会改变？

Answer 1

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

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;
}