4

CSSホバーでリンクを作りたかった。font-face を使用して、JennaSue で別のフォントを作成しています。

CSS:

@font-face {
    font-family:JennaSue1;
    src: url(font/JennaSue.otf);  
} 
 @font-face {
    font-family:JennaSue3;
    src: url(font/JennaSue.ttf);  
} 
@font-face {
    font-family:JennaSue2;
    src: url(font/JennaSue.eot);  
} 

#australia {
    position:absolute;
    font-size:40px; 
    left:0px; 
    top:32px; 
    color:#fff; 
    font-family: JennaSue1,JennaSue2,JennaSue3;
}
#australia a {
    text-decoration:none; 
    color:#fff;}
#australia a:hover { color:#b30101; }

HTML:

<div id="australia"><a href="#">Australia</a></div>

フォントはクロムでうまく機能しますが、リンクにカーソルを合わせると、次の図のように表示されます。

ホバー画像

http://jsfiddle.net/6UdYd/1/を見ることができるリンクへの回答をありがとう。

4

5 に答える 5

3

Grezzoが指摘したように、フォントに何か奇妙なことが起こっているようです。この fiddleを見ると、左のリンクはあなたの例のようです。要素の境界を視覚化するために境界線を追加しましたa。「j」と「p」は、この境界線の外側にはみ出しています。下と左のパディングを追加すると (右のリンクで行ったように)、ホバーが期待どおりに機能します。

これは私が推測する簡単な修正ですが、適切に行う方法が本当にわかりません。

于 2012-05-30T09:39:51.660 に答える
1

を追加してみてくださいfont-weight。これで問題は解決したようです。

#australia a:hover{
    color:#b30101;
    font-weight: 500;
}

もう 1 つの可能性は、テキストが a タグに収まるように、左側に少しパディングを追加することです。

#australia a{
    text-decoration:none;
    color:#fff;
    padding-left: 3px;
}
于 2012-05-30T09:36:11.977 に答える
1

その j の左側の部分が実際の文字領域の開始位置の左側にあることに関係しているようです。この例を参照してください (おそらくクロムを使用する必要があります) http://jsfiddle.net/JGgHf/で、j の左側が div に含まれていません。

于 2012-05-30T09:16:21.160 に答える
0

http://jsfiddle.net/rakesh_katti/n37hC/2/

あなたが投稿したコードにエラーはありません。エラーは、それに関連する他の要素にある可能性があります。または、使用しているフォント。

于 2012-05-30T09:15:37.623 に答える
0

試す：

#australia a:link {
    text-decoration:none; 
    color:#fff;
}
#australia a:hover { color:#b30101; }

:link 疑似コードを使用しない限り、Chrome がスタイルを無視することがあります。

于 2012-05-30T09:45:39.367 に答える