核心思想是将每个大小的字体单独作为独立的行，单独设置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;
}

这样就解决了