4

我想用 CSS hover 建立一个链接。我正在使用 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>

该字体在 chrome 上运行良好，但当我将链接悬停时，它显示如下图片：

悬停图像

感谢您在此处链接的答案，您可以看到http://jsfiddle.net/6UdYd/1/；

4

5 回答 5

3

正如Grezzo指出的那样，字体似乎有些奇怪。如果你看这个 fiddle，左边的链接就像你的例子。我添加了一个边框来可视化a元素的边界。“j”和“p”在此边界之外突出。通过向其添加底部和左侧填充（如在右侧链接上所做的那样），悬停按预期工作。

我想这有点快速修复，但我真的不知道如何正确地做到这一点。

于 2012-05-30T09:39:51.660 回答
1

这似乎与 j 的左侧部分位于实际字符区域开始的左侧有关。请参阅此示例（可能必须使用 chrome）http://jsfiddle.net/JGgHf/其中 j 的左侧未包含在 div 中。

于 2012-05-30T09:16:21.160 回答
1

尝试添加一个font-weight. 这似乎解决了问题。

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

另一种可能性是在左侧添加一点填充，以便文本适合a-tag。

#australia a{
    text-decoration:none;
    color:#fff;
    padding-left: 3px;
}
于 2012-05-30T09:36:11.977 回答
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; }

我发现 Chrome 有时会忽略我的 a 样式，除非我使用 :link 伪代码。

于 2012-05-30T09:45:39.367 回答