我在a
链接上设置自定义和花哨@font-face
的问题时遇到了问题。
字体( Alex Brush )超出了它的边界(通过边界,我的意思是这种情况下的可点击部分),这通常不是浏览器的问题。但是,我注意到当我为:hover
状态使用不同的颜色时,超出的部分保留了非悬停的链接颜色。
这出现在Chrom {ium | e}上(我在Ubuntu 13.10上使用Chromium 31)但在Firefox上没有。经过进一步测试后,我注意到其他奇怪的故障取决于您使用鼠标和标签的方式,......
TL; DR:你可以try it online。
或者,这里有一些你可以玩的HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href='//fonts.googleapis.com/css?family=Alex+Brush'>
</head>
<body>
<a>!</a>
</body>
</html>
和相应的CSS:
a {
font-family: 'Alex Brush';
font-size: 400px;
color: red;
text-decoration: none;
}
a:hover {
color: green;
}
以下是:hover
链接时出现的故障:
是否可以告诉边界框包含整个字体?
奖金问题:除了为了样式目的修复边界框之外,是否可以一劳永逸地修复它?用例是使用包含所有文本的正确可点击部分,而不使用display: block
或display: inline-block
。
答案 0 :(得分:0)
在Chrome中正常使用
我没有Chromium,但我经常听说Chromium上有错误的网站,我不知道任何使用它的“普通”人,这就是我不在Chromium中测试的原因
无论如何,这是一个奇怪的可能解决方案,但它可能有用吗?
a:hover {
color: transparent;
text-shadow: 0 0 green;
}
答案 1 :(得分:0)
有趣。我上个月看了a similar issue last month。在那里解决了完全相同的错误,我也看到它也发生在那里。
但与此同时,这个问题似乎已得到解决。当前版本的Chrome(Versie 32.0.1700.76 m)显示:hover
上的字形正确着色。您的示例作为上面链接中的示例现在工作正常。我很确定这个问题也将在Chromium修复。
如果您想了解更多有关此错误发生的字体特定信息,请查看my original answer。
答案 2 :(得分:0)
我在一个菜单中遇到了类似的问题,并查看了RoeIn的初始答案,他将其链接到了,但这使整个菜单调整出来。但是,下面的解决方案对我有用:
padding-right: 20px;
margin-right: -20px;
或任何最适合您目的的尺寸。只要填充等于负边距,它就不会放出其他元素。
忽略对“普通”人可能用于浏览器的讨论,Safari中也存在此问题。