嵌入式字体行高问题答案

【问题标题】：Embedded font line-height issue嵌入式字体行高问题
【发布时间】：2014-01-26 15:46:59
【问题描述】：

我正在为垂直菜单使用嵌入式字体（tex gyre adventor）。由于行高/重叠，菜单项的悬停行为不正确（见图）。当我尝试更改链接的 line-height 属性时，没有任何反应。

使用常规字体，如 Arial 效果很好（顶部/底部空间较小 - 请参见图像上的蓝色框）。知道如何解决这个问题吗？

【问题讨论】：

【解决方案1】：

根据您的工作环境，有多种选择。

您可以使用 CSS line-height 属性调整 line-height。

如果由于某种原因由于您的布局不起作用，您可以将每一行分隔在 div 或 span 中，并使用负值相对调整每一行的边距。

如果您的工作环境阻止您使用 CSS（电子邮件），您可以下载一个名为 FontForge 的免费软件程序，并使用减少的指标重构实际字体。

【讨论】：

感谢您的提示 - 我认为这与网络字体有关 - 当我使用“常规”字体（如 Arial）时，一切正常（使用 CSS）。
当然，不同的字体有不同的度量。标准字体通常具有典型的行高，只有在使用自定义 Web 字体时，您才会遇到行高被扩展的情况。但是如果你想保持你选择的字体，你应该能够解决与我列出的技术的任何格式冲突。

【解决方案2】：

我刚刚遇到了完全相同的问题。

当应用于内联元素（例如链接）时，行高不会低于 14px 左右 - 这太奇怪了。

但是我注意到，在网站的另一个区域，我在块容器中的链接具有较小的字体大小和较小的行高。

我显示了链接“inline-block”，瞧，行高按预期工作。

此示例的行高不正确：

.my-container a {
    font-size:16px;
    line-height:14px;
}

修改为：

.my-container a {
    font-size:16px;
    line-height:14px;
    display:inline-block;
}

现在行高可以正常工作了。

【讨论】：