求助：Roboto字体300权重链接下划线在Chrome/Opera中过粗

这个问题是Chrome、Opera基于的WebKit/Blink内核在处理text-decoration: underline时的渲染特性导致的——它会默认根据字体字重“自动加粗”下划线，而Firefox、Edge等浏览器的渲染逻辑更贴合预期。下面给你几个靠谱的解决办法，按推荐程度排序：

方法1：用border-bottom模拟下划线（最稳定，全浏览器表现一致） #

直接抛弃浏览器自带的下划线，用边框模拟，完全可控：

/* 先确保正确引入Roboto 300字重 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

a {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-decoration: none; /* 去掉默认下划线 */
  border-bottom: 1px solid currentColor; /* 用边框模拟下划线，颜色与文字一致 */
  padding-bottom: 2px; /* 调整下划线与文字的间距，按需修改 */
}

/* 悬停状态可自定义样式，比如保持粗细或增强反馈 */
a:hover {
  border-bottom-width: 1px; /* 保持粗细一致，也可改为2px突出悬停效果 */
  /* 可选：border-bottom-color: #your-hover-color; */
}

这种方法的好处是所有浏览器表现完全统一，你能精确控制下划线的粗细、颜色和位置，彻底消除内核差异问题。

方法2：用CSS新属性控制下划线（更贴合原生下划线体验） #

如果想保留原生下划线的质感，可以用Chrome支持的text-decoration-thickness和text-underline-offset属性强制控制：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

a {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-decoration: underline;
  text-decoration-thickness: 1px; /* 强制设置下划线粗细 */
  text-underline-offset: 2px; /* 调整下划线与文字的距离 */
}

/* 针对极少数旧版WebKit内核浏览器，可加前缀兼容 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  a {
    text-decoration-thickness: 1px;
  }
}

这个方法不需要去掉原生下划线，直接强制指定粗细后，Chrome和Opera的渲染就会符合预期，悬停时也不会出现过粗问题。

方法3：优化字体渲染（辅助方案，效果有限） #

如果上面两种方法都不想用，可以尝试开启字体平滑，可能会略微缓解下划线粗细差异，但效果不如前两种明显：

a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

建议优先选择方法1或方法2，基本能完美解决你的问题~

内容的提问来源于stack exchange，提问作者user5857398