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。这在刷子脚本字体中很常见，并允许单个字母通过略微重叠来连接。所以它是字体的有效属性，不幸的是原始印刷师不必考虑的问题 - 纸上没有悬停状态;）

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

1 个答案: