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容器外面运行.检查它或给它一个背景颜色,你可以看到这一点.一个解决方法是通过给予a额外的一些来伪装额外的空间padding-right.

我不确定字形是如何在容器外运行的,所以如果有其他人知道的话我会感兴趣.现在,我正在分享celeriko的怀疑,这个字体的指标是不可靠的.

编辑:原来它是字体的侧面轴承,允许字形在其边界框外运行.这在刷子脚本字体中很常见,并允许单个字母通过略微重叠来连接.因此它是字体的有效属性,不幸的是原始排版员不必考虑的问题 - 纸上没有悬停状态;)