我在@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: block
或display: 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/