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

时间:2014-01-23 02:02:39

标签: html css3 fonts font-face

我在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: blockdisplay: inline-block

3 个答案:

答案 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中也存在此问题。