Roboto字体设置font-weight:500时文本对齐错位解决方案问询

可行解决方案 #

这个问题本质是Chrome内核下Roboto字体500字重的渲染特性导致的字模高度计算偏差，属于浏览器字体渲染的已知小问题，不需要修改字重即可修复，可根据业务场景选择以下方案：

• 方案1：调整flex对齐规则（最推荐，无侵入）
  原来的align-items: flex-start是对齐元素顶部，直接改为按文字基线对齐即可从根源解决文字错位问题：

  foo-entry{
    display:flex;
    align-items: baseline;
  }
  

• 方案2：保留原对齐规则的微调方案
  如果业务逻辑必须保留align-items: flex-start，给value选择器加1px上偏移抵消下沉即可：

  .value{
    font-weight: 500;
    margin-top: -1px;
    /* 也可使用transform: translateY(-1px); 效果一致 */
  }
  

• 方案3：统一文本渲染属性抹平差异
  给label和value统一配置行高、抗锯齿属性，消除不同字重带来的渲染差：

  .label, .value {
    line-height: 1.2; /* 可根据设计规范调整为统一值即可 */
    -webkit-font-smoothing: antialiased;
  }
  

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