작은 줄 높이를 사용할 때 웹 글꼴 클릭 가능 영역이 겹칩니다.

Question

세로 메뉴에 Neue Helvetica Thai Light 웹 글꼴을 사용하려고했습니다. 이 메뉴의 글자는 크지 만 줄 사이의 간격은 다릅니다. 그래서 나는 font-size과 line-height을 css로 설정했고 appereance는 완벽하지만 기능은 그렇지 않습니다.

각 링크가 문자 위아래로 확장되어 이웃 항목 클릭 가능 영역이 겹쳐져 사용자가 클릭 한 링크를 따라갈 수 없도록합니다. 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 small leter g이 사용되었으므로 맨 아래 부분이 먼저 잘려야하므로 폰트에서 기준선보다 많이 오는 문자를 사용하십시오.

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

여기에 해결책이있는 fiddle입니다.

Answer 2

그냥 생각하지만, 아마도 font-height: 24px; 같은 것이 도움이 될 수 있습니까?