Question

我在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链接时出现的故障：

Font glitch

是否可以告诉边界框包含整个字体？

奖金问题：除了为了样式目的修复边界框之外，是否可以一劳永逸地修复它？用例是使用包含所有文本的正确可点击部分，而不使用display: block或display: inline-block。

Answer 1

在Chrome中正常使用

我没有Chromium，但我经常听说Chromium上有错误的网站，我不知道任何使用它的“普通”人，这就是我不在Chromium中测试的原因

无论如何，这是一个奇怪的可能解决方案，但它可能有用吗？

a:hover {
  color: transparent;
  text-shadow: 0 0 green;
}

Answer 2

有趣。我上个月看了a similar issue last month。在那里解决了完全相同的错误，我也看到它也发生在那里。

但与此同时，这个问题似乎已得到解决。当前版本的Chrome（Versie 32.0.1700.76 m）显示:hover上的字形正确着色。您的示例作为上面链接中的示例现在工作正常。我很确定这个问题也将在Chromium修复。

如果您想了解更多有关此错误发生的字体特定信息，请查看my original answer。

Answer 3

我在一个菜单中遇到了类似的问题，并查看了RoeIn的初始答案，他将其链接到了，但这使整个菜单调整出来。但是，下面的解决方案对我有用：

  padding-right: 20px;
  margin-right: -20px;

或任何最适合您目的的尺寸。只要填充等于负边距，它就不会放出其他元素。

忽略对“普通”人可能用于浏览器的讨论，Safari中也存在此问题。

样式超过其文本边界框的字体

3 个答案: