核心思想是将每个大小的字体单独作为独立的行,单独设置line-height,而不是在同一行
HTML
<div class="a">
<div class="b c"></div>
<div class="b d"></div>
<div class="b e"></div>
</div>
CSS
.a {
display: flex;
height: 40px;
}
.b {
height: 100%
}
.c {
font-size: 20px;
line-height: 30px;
}
.d {
font-size: 25px;
line-height: 32px;
}
.e {
font-size: 35px;
line-height: 40px;
}
这样就解决了