我见过几次这种情况,只在 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;
}
这是什么?可以修复吗?这只是网络字体文件创建不当或字体不好的情况吗?有谁熟悉这个问题或有解决方法吗?
正确的几个像素没有给出它们的原因:hover
颜色是因为它们跑到了外面a
容器。检查它或给它一个背景颜色你可以看到这个。解决方法是通过给a
一些额外的padding-right
.
我不确定字形到底如何能够在容器外运行,所以我很感兴趣是否有人知道。现在,我同意 celeriko 的怀疑,即该字体的指标很糟糕。
EDIT:原来是字体的问题侧轴承允许字形在其边界框之外运行。这在画笔字体中很常见,并且允许各个字母通过彼此稍微重叠来连接。因此,这是字体的有效属性,不幸的是,导致了原始印刷师不必考虑的问题 - 纸上没有悬停状态;)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)