我在@font-face链接上设置自定义和精美a样式时遇到问题。

字体(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: blockdisplay: inline-block

最佳答案

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

但是与此同时,这个问题似乎已经解决。当前版本的Chrome(版本32.0.1700.76 m)显示该字形在:hover上已正确着色。上面链接中的示例都可以正常工作。我非常确定问题也会在Chromium中得到解决。

如果想进一步了解导致此错误的字体特定信息,请查看my original answer

关于html - 样式超出其文本边界框的字体,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21297936/

10-12 12:50
查看更多