Question

我一直在尝试使用Neue Helvetica Thai Light webfont进行垂直菜单。这个菜单中的字母应该很大，但行之间的空格不是。所以我在css中设置了font-size和line-height，并且上升是完美的，但功能却不是。

每个链接都在字母的上方和下方延伸，以便相邻的项目可点击区域重叠，从而阻止用户关注他们点击过的链接。使用Arial，Verdana等常用字体时，此问题并不存在。

问题可能在字体本身，但如何避免，有一些解决方法吗？我已将问题发送到fonts.com - 提供字体但仍在等待答案的网站。

HTML：

<ul class="menu">
    <li><a href="1">Item 1</a></li>
    <li><a href="2">Item 2</a></li>
    <li><a href="3">Item 3</a></li>
</ul>

CSS：

ul.menu a {
    font-family: 'HelveticaNeueW31-Light';
    font-size: 39px;
    line-height: 28px;
}

Answer 1

在互联网上进一步（重新）搜索之后，我偶然发现this post并最终使用了提供的解决方案的略微修改版本。我不热衷于回答我自己的问题，但它可能对某人有帮助，因为这个问题并不常见，所以答案不容易找到。

诀窍是隐藏锚的溢出部分。由于内联元素（如锚点）忽略overflow属性锚点显示更改为display: block，然后设置overflow: hidden。然后调整height，以便不切断字母。使用低于基线的字母在字体中最多，因为底部应首先被切除，因为使用了Helvetica小字母 g 。

ul.menu a {
    font-family: 'HelveticaNeueW31-Light';
    font-size: 39px;
    display: block;
    height: 47px;
    overflow: hidden;
}

以下是fiddle解决方案。

Answer 2

只是一个想法，但是像font-height: 24px;这样的东西可能有帮助吗？

使用较小的线高时，Web字体可点击区域重叠

2 个答案: