2

縦型メニューにNeueHelveticaThaiLightウェブフォントを使用しようとしています。このメニューの文字は大きいはずですが、行間のスペースは大きくありません。だから私は設定font-sizeしline-height、cssと外観は完璧ですが、機能はそうではありません。

各リンクは文字の上下に伸びているため、隣接するアイテムのクリック可能な領域が重なり、ユーザーがクリックしたリンクをたどることができません。この問題は、Arial、Verdanaなどの通常のフォントを使用する場合には存在しません。

問題はおそらくフォント自体にありますが、どうすれば回避できますか？回避策はありますか？fonts.comに質問を送信しました。フォントを提供しているが、まだ回答を待っているWebサイトです。

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 に答える