Webfont + 悬停颜色：部分文本不改变颜色

Question

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

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

来自小提琴的 HTML：

<a>Some Text Foo Bar</a>

来自小提琴的 CSS：

@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;
}

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

Answer 1

正确的几个像素没有给出:hover 颜色的原因是它们在a 容器之外运行。检查它或give it a background color，你可以看到这个。一种解决方法是通过给a 一些额外的padding-right 来伪造额外的空间。

我不确定字形究竟如何能够在容器外运行，所以如果其他人知道，我很感兴趣。现在我和 celeriko 一样怀疑这种字体的指标有问题。

编辑：原来是字体的side bearings 允许字形在其边界框之外运行。这在画笔字体中很常见，并且允许单个字母通过略微重叠来连接。所以它是字体的一个有效属性，不幸的是，它导致了一个原始印刷者不必考虑的问题——纸上没有悬停状态；）