我见过几次，只是在 Webkit 上.场景是您有一些带有悬停颜色的文本，并且它使用 webfont 自定义字体.当您悬停时，最右边的部分字母没有获得悬停颜色.要明白我的意思，请在 Chrome 或 Safari 中查看此小提琴，并在鼠标悬停时仔细查看文本末尾的r"，它不是完全红色的.

I've seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it's using a webfont custom font. When you hover, part of the furthest right letter is not getting the hover color. To see what I mean, view this fiddle in Chrome or Safari, and look carefully at the "r" at the end of the text while hovering with your mouse, it is not completely red.

http://jsfiddle.net/jaredh159/xPZB8/

来自小提琴的 HTML:

HTML from fiddle:

<a>Some Text Foo Bar</a>

来自小提琴的 CSS:

CSS from fiddle:

@font-face {
    font-family: 'stephanie_marie_jfregular';
    src: url('stephanie-marie-jf-webfont.eot');
    src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
         url('stephanie-marie-jf-webfont.woff') format('woff'),
         url('stephanie-marie-jf-webfont.ttf') format('truetype'),
         url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

a {
    font-family: stephanie_marie_jfregular;
    color: #000;
    font-size:50px;
}

a:hover {
    color: #ff0000;
}

这是什么?可修复?仅仅是创建不良的网络字体文件还是错误的字体?任何人都熟悉这个问题或有解决方法?

What is this? Fixable? Is it just the case of a poorly created web-font file, or a bad font? Any one familiar with this issue or have a workaround?

推荐答案

右边的几个像素没有给出它们的 :hover 颜色的原因是因为它们在 a容器.检查它或给它一个背景色，你可以看到这个.一种解决方法是通过给 a 一些额外的 padding-right 来伪造额外的空间.