自定义字体周围不需要的空间答案

【问题标题】：Unwanted space around custom fonts自定义字体周围不需要的空间
【发布时间】：2013-05-02 19:03:02
【问题描述】：

我正在尝试在@font-face kit 的帮助下为我的网站使用自定义字体。但是标签内有一些不需要的空间。我用过 h1 标签。更改标签没有帮助。

看图。在 Chrome 等中，顶部有很多空间。但在 IE 中，空格在下方。有什么解决办法吗？

代码 -

@font-face {
font-family: 'kozukalight';
src:url('fonts/kozgopr6nlight.eot');
src:url('fonts/kozgopr6nlight.eot?#iefix') format('embedded-opentype'),
    url('fonts/kozgopr6nlight.woff') format('woff'), 
    url('fonts/kozgopr6nlight.ttf') format('truetype'),     
    url('fonts/kozgopr6nlight.svg#kozukalight') format('svg');
font-weight:normal;
font-style:normal;  
}

h1 {
font: 60px 'kozukalight', Helvetica, Arial, sans-serif;
text-shadow: 0 1px rgba(255,255,255,0.5);
color: #383838;
}     

<body>
<h1>News and Events</h1>
</body>

【问题讨论】：

请发布代码或 jsfiddle。
你是用什么在 Chrome 中得到它的？请给我们看一些css
尝试调整line-height
你也可以试试 vertical-align: baseline; 以防 IE 做一些奇怪的事情
pzin 和 DiederikEEn - 我已经发布了代码。

标签： html css

【解决方案1】：

这与自定义字体无关。 <h1> 有默认边距，所以你必须摆脱它：

h1 {
    font: 60px 'kozukalight', Helvetica, Arial, sans-serif;
    text-shadow: 0 1px rgba(255,255,255,0.5);
    color: #383838; padding: 0; margin: 0;
}

查看fiddle 的默认行为（如您所描述的很多“空格”）和updated fiddle 的边距设置为0。

【讨论】：

Shadow Wizard - 空间在 h1 标签内而不是在外面 :) 我使用了 Eric Myer 的重置，它在开始时重置每个标签。