css 3字体创建换行

Question

我使用css3中的@font face在网站上放置一些字体，而不使用图像作为页面标题。

然而，我发现当使用字体时，标题下方会产生一个缺口，有点像段落或换行符。间隙大小是相对于字体大小的，并且随着大小的增加而增加。

我使用的字体类型是Asenine，它相对较小，所以我将大小设置为60px

我不知道为什么会发生这种情况，似乎找不到解决办法。

这是我的CSS

}
@font-face {
    font-family:'asenine';
    src: url('fonts/asenine.eot');
    src: url('fonts/asenine.eot?#iefix') format('embedded-opentype'),
    url('fonts/asenine.woff') format('woff'),
    url('fonts/asenine.ttf') format('truetype');
 }
 h1{
    font-size:60px;
    font-family:asenine, Arial, Helvetica, sans-serif;
    text-shadow:7px 3px 4px #0c0c0c;
    font-weight:100;
}

Answer 1

这可能是因为线的高度。字体大小越大，线条高度就越大。并且使用CSS简写进行字体相关设置，效果更好：

h1 { 
    font: normal 60px/0 'asenine', Arial, Helvetica, sans-serif; 
    text-shadow:7px 3px 4px #0c0c0c;
}

第一行的意思是：正常重量，60px字体大小，0px行高（去掉空格），字体系列。