css - div底部的css文本/从下方剪切空白

Question

修改行高无济于事，因为它会从文本顶部切除部分。

有什么方法可以垂直对齐底部的文本？（垂直对齐：文本底部；不起作用）

有没有办法摆脱 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 文件，我猜这是问题的根源，因为它没有正确重新缩放。谢谢你的回答。

谢谢

Answer 1

.leftSideNews .t1 {
   font-size: 60pt;
color: #368FD8;
vertical-align: baseline;
display: inline-block;
line-height: 55px;
background: gray;
}

http://jsfiddle.net/dolours/zvMKH/332/ 这是你在找我不确定。