我在设计自定义和奇特的样式时遇到问题 @font-face在 a 链接上。
字体 ( Alex Brush ) 超出了它的边界(边界，在这种情况下我指的是可点击部分)，这对于浏览器来说通常不是问题。但是，我注意到当我为 :hover 状态使用不同的颜色时，超出的部分会保持非悬停链接的颜色。
这会出现在 Chrom{ium|e} 上(我在 Ubuntu 13.10 上使用 Chromium 31)，但不会出现在 Firefox 上。进一步测试后，我注意到其他奇怪的故障会发生，具体取决于您使用鼠标和标签的方式，...
长话短说:你可以 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;
}
这是我在 :hovering 链接时遇到的故障:
是否可以告诉边界框包含整个字体？
额外的问题:除了出于样式目的修复边界框之外，是否可以一劳永逸地修复它？用例是在不使用 display: block 或 display: inline-block 的情况下拥有一个包含所有文本的适当的可点击部分。
最佳答案
很有趣。我看了a similar issue last month上个月。那里解决了完全相同的错误，我也看到它在那里发生。
但与此同时，这个问题似乎已经解决了。当前版本的 Chrome (Versie 32.0.1700.76 m) 显示在 :hover 上正确着色的字形。您的示例和上面链接中的示例现在都可以正常工作。我很确定这个问题也会/已经在 Chromium 中得到修复。
查看 my original answer如果你想知道更多关于是什么字体细节导致了这个错误。
关于html - 设置超出其文本边界框的字体样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21297936/