我的链接设置在" font-weight 300"和"文本转换下划线"。我使用谷歌字体" Roboto"通过@import。在Chrome和Opera中,下划线很像字体重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中的问题:
有人知道如何解决这个问题吗?
答案 0 :(得分:0)
我经常发现Roboto呈现下划线以接近文本。在大多数情况下我不喜欢这种情况(主要是较小的字体大小)。
我通常使用border或box-shadow。您还可以考虑使用透明色或子像素(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
}
}