css - Chrome 字体颜色 'clipping'

Question

我的链接在悬停时改变了颜色，但全文没有改变，并且将剪掉的部分保留为默认颜色，使其看起来有问题。

有办法解决吗？

http://jsfiddle.net/C8K8z/

a{
    font-family:'Oleo Script';
    font-size:50px;
    color:white;
    text-decoration: none;

}
a:hover{
    color:#c41313;
    text-decoration:underline;
}

Answer 1

问题似乎与 Oleo Script 字体有关。它不是 100% 一致，但某些字符的字体设计(暗示？)可能会导致边缘在元素的框外结束。

我建议使用没有此问题的其他字体，但如果您致力于 Oleo，则可以在左侧和右侧添加填充以解决此问题。

a{
    font-family:'Oleo Script';
    font-size:50px;
    color:white;
    text-decoration: none;
    padding: 0px 3px 0px 3px;
}

此外，您的 fiddle 没有正确导入字体(我相信是 jsfiddle 的问题)，但我能够通过使用 Google Font JavaScript 导入选项而不是链接 css 资源来让它工作。

你可以在这里看到字体问题:http://jsfiddle.net/aYxEU/

这里的修复:http://jsfiddle.net/hFgaw/