使不同字体的线高一致

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

You can set line-height on both so that it stays even. I added padding on the initial container just to give it some breathing room.

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;

即可