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

感谢

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/ 这是你在寻找我不确定。