Webfont（@ font-face）行高问题

Question

我经常在我开发的网站中嵌入webfont（@ font-face），直到今天我才遇到重大问题。

事实上，我觉得线高有一个大问题，我不是非常擅长英语，所以我会尝试用图片来说明它。我已经联系了fontshop.com的支持（购买了字体），但他们似乎并不理解/解决问题。

我们之前使用标准桌面字体（=渲染对我们有用）：

我们使用font-face（CSS样式表没有变化）：

这是CSS：

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

Answer 1

通常，字体网站可以在下载时配置webfont软件包。我从myfonts.com购买了所有字体，在高级设置下有线高调整选项。如果此选项可用，请尝试使用本机行高调整来下载字体。如果没有，请尝试将字体上传到fontsquirrel的在线字体生成器并上传新版本。

Answer 2

这不是相同的字体。 O的形状和R上的臂的曲率将其丢弃，这意味着正在使用后备字体，可能是由于@ font-face未正确加载。如前所述，不同的字体将具有不同的默认间距，这也会让您相信它是一个行高问题。

尝试让你的后备字体显而易见，例如：

font-family:"DINPro-Bold",serif;

Answer 3

如果你的webfont的行高有问题（特别是如果字体假设你的项目很大）试试这个：在div或其他块元素中关闭你的字体并将“overflow”设置为“hidden”。 Div将具有您字体的精确高度，因此任何额外的空间都将被切断。

Answer 4

这对我有用：

在Font Squirrel处生成网络字体。上载字体后，选择“专家”，向下滚动并选中“ X高度匹配”复选框。调整高度以匹配x高度。

Answer 5

根据wikipedia

的行高

  

在排版中，领先（与标题押韵）是指金额   在类型的行之间添加垂直间距。

这可以像这样实现......

的.class { line-height：1em; }

但是如果你指的是字母的高度，那么这不是可以调整的东西。它是您选择使用的字体的一部分。

Answer 6

尝试添加“position：relative; top：5px;”到“h1”标签

Answer 7

尝试位置：相对; padding-top：5px; padding-bottom：0px;