2

我一直在尝试将 Neue Helvetica Thai Light webfont 用于垂直菜单。此菜单中的字母应该很大，但行与行之间的空间不是很大。所以我已经设置font-size并line-height在 css 和外观是完美的，但功能不是。

每个链接都在字母的上方和下方延伸，以便相邻项目的可点击区域重叠，从而防止用户点击他们点击的链接。使用 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;
}
4

2 回答 2

2

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

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

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

这是解决方案。

于 2012-12-04T16:24:39.800 回答
0

只是一个想法，但也许类似的东西 font-height: 24px;可能会有所帮助？

于 2012-12-04T13:48:59.220 回答