CSS 链接下划线在某些浏览器中太粗了答案

【问题标题】：CSS Link-underline ist too thick in some browsersCSS 链接下划线在某些浏览器中太粗了
【发布时间】：2018-03-08 21:36:35
【问题描述】：

我的链接设置为“font-weight 300”和“text-transform underline”。我通过@import 使用谷歌字体“Roboto”。在 Chrome 和 Opera 中，下划线像 font-weight 400 一样粗。FF、Edge 和 IE 没有这个问题。

HTML：

<p><a href="index.html">Zurück</a></p>

SCSS：

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

@mixin font-family-sans-serif(){  
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

a, 
a:hover, 
a:link, 
a:visited, 
a:active, 
a:focus,
button{
  text-decoration: none;
  &:hover, &:focus{
    text-decoration: underline;
  }
}

悬停时FF没有问题：

Chrome 悬停时的问题：

有人知道如何解决这个问题吗？

【问题讨论】：

你能给我们jsfiddle链接吗

标签： html css cross-browser google-fonts

【解决方案1】：

我经常发现 Roboto 将下划线渲染到靠近文本的位置。在大多数情况下我不喜欢它（主要是较小的字体）。

我通常使用边框或框阴影。您还可以考虑使用透明色或子像素（Chrome 在渲染子像素方面做得很好）粗细来调整外观。

但这取决于您所针对的浏览器支持。一些例子给你一个想法。

带有 box-shadow 的 SCSS 示例：

$link-color: #0e7aef;

a {
    padding-bottom: 1px; // Distance of 'line' from link text adjust accordingly
    font-family: 'Roboto', sans-serif;
    text-decoration: none;

    &:focus,
    &:hover {
        box-shadow: 0 1px 0 rgba($link-color, 0.8);
        // box-shadow: 0 0.75px 0 $link-color; // sub-pixel example
    }
}

【讨论】：