html - 更改 :hover color for links containing accented letters

Question

不出所料，我在一些 html 页面上有一些链接。其中之一是:

<a href="#">Questo &egrave; un link</a>

我使用以下 CSS 规则管理它们的颜色和相关过渡:

a, a:visited {
  text-decoration: none;
  border-bottom: 1px dotted white;
  color: inherit;

  /* transitions */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

a:hover {
  border-bottom: 1px solid #003366;
  color: #003366;
}

对于最新的 Safari 和最新的 Chrome，重音不受颜色变化的影响。看截图，重音应该和其他字符一样是蓝色的。

编辑:我忘了说我使用的是特定字体。默认字体或其他字体集都没有问题。但我需要使用那个 (Orbitron)。

有什么快速的方法可以解决这个问题吗？

Answer 1

字体的某些字形规范有误。见:

字体的升序为 750，但字形的升序为 904。由于它溢出到 em 正方形之外，链接不够高，无法包含一些字形。

你最好的办法是使用另一个(可能是 Jura？)，因为我能想到的唯一解决办法有一些缺点:

a {
    display: inline-block; /* so links take line-height as min-height */
    line-height: 1.68em; /* make line-height encompass all (one can hope) glyphes */
}

这将防止链接内部的换行并增加链接行框的高度。但它可以解决您的问题。