css 3字体创建换行符答案

【问题标题】：css 3 font face creating line breakcss 3字体创建换行符
【发布时间】：2012-08-20 20:09:10
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： css font-face font-size

【解决方案1】：

这可能是因为行高。字号越大，行高越大。并且字体相关设置使用 CSS 简写，比较好：

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

第一行的意思是：正常粗细、60px 字体大小、0px 行高（去掉那个空间）、字体系列。

【讨论】：