css - divの下部にあるcssテキスト/下から空白を切り取る

Question

行の高さを変更しても、テキストの上部から一部が切り取られるため、役に立ちません。

下部のテキストを垂直に揃える方法はありますか? ( vertical-align: text-bottom; は機能しません )

Discover の下の空白を取り除く方法はありますか。

html は次のとおりです。

<div class='leftSideNews'> <span class='t1'>Discover</span> <span class='t2'>s world !</span> </div>

.leftSideNews {
    font-size: 20pt;
    /*line-height: 100px;*/
    /*vertical-align: text-bottom;*/
}

.leftSideNews .t1 {
    font-size: 60pt;
    color: #368FD8;
   vertical-align: baseline;
}

.leftSideNews .t2 {
    font-size: 40pt;
    color: #EA3B3B;
}

lefSideNews は両方のテキストをカバーしています。t1 は選択されたテキスト「Discover」を表し、t2 は他の赤いテキストを表します

編集2：インポートしたフォントは、そのスパンでも使用されている.toffファイルであり、適切に再スケーリングされていないため、問題の根本であると推測している.woffファイルではありません。回答ありがとうございます。

ありがとう