嵌入式字体行高问题

Question

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

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

Answer 1

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

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

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

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

Answer 2

我刚才有同样的问题。

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

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

我显示了链接＆＃34; inline-block＆＃34;并且，线高度按预期工作。

此样本的行高不正确：

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

修改为：

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

现在线条高度按预期工作。