使用Roboto字体时<label>与<input>元素垂直对齐问题求助

问题现象 #

在Chrome浏览器中使用Roboto Regular字体时，和元素出现垂直对齐不一致的问题：

• Retina与非Retina屏幕下无法同时实现完美对齐
• 页面中存在

  标题时对齐正常，无

  则出现偏移

• 改用Arial等字体时问题消失

问题复现代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>Document</title>
  <style>
    body {
        padding: 50px;
    }

    .field {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin: 5px 0;
        position: relative;
    }

    input, select, label {
            font-family: 'Roboto', Arial, Helvetica, sans-serif;
      box-sizing: border-box;
      border: 1px solid grey;
      font-size:14.4px;
      height: 30px;
        }

    label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
      
    .line {
      position: fixed;
      height:1px;
      width: 100%;
      background-color: red;
      left:0;
      top: 75px;
      z-index:1;
    }
    </style>
</head>

<body>
  <div class="line"></div>
    <div class="field">
        <label>Titre :</label>
        <input type="text" value="Titre">
    </div>
</body>

</html>

原因分析 #

1. 原生控件与普通元素的渲染差异：作为浏览器原生表单控件，内部有默认布局规则（如光标占位、默认内边距），而是普通块级元素，两者对Roboto字体的度量（如ascender、descender）计算逻辑不同，放大了对齐差异。
2. 字体加载与fallback影响：无

   时Roboto字体可能加载延迟，浏览器先使用Arial fallback渲染，字体切换后导致布局偏移；有

   时字体提前加载完成，渲染逻辑一致。

3. normalize.css的line-height作用局限：normalize.css设置的line-height: 1.15在原生input和普通label上的生效逻辑不同，无法完全统一文字垂直位置。

已尝试方案的优缺点 #

• 方案1：给设line-height: normal，能解决当前问题，但跨浏览器表现不稳定，部分浏览器会出现新偏移。
• 方案2：移除height用padding维持高度，无法精准控制到30px的输入框高度，不符合需求。
• 方案3：改用display: table-cell+vertical-align: middle，布局灵活性不如flex，适配复杂场景受限。

更可靠的解决方案 #

方案一：统一内边距与行高，消除原生控件差异 #

给移除默认内边距，同时让和的行高等于元素高度，强制文字垂直居中：

input, select, label {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    border: 1px solid grey;
    font-size:14.4px;
    height: 30px;
    padding: 0; /* 移除input默认内边距 */
    line-height: 30px; /* 行高等于高度，确保文字垂直居中 */
}

input {
    appearance: none; /* 去掉原生控件默认样式，规避浏览器差异 */
}

方案二：统一flex对齐逻辑 #

让也使用flex布局的对齐方式，和保持一致的对齐基准：

input {
    display: flex;
    align-items: center; /* 和label的对齐方式统一 */
    padding: 0 4px; /* 按需添加内边距，避免文字贴边 */
}

方案三：优化字体加载时机 #

在Roboto字体引入时添加font-display: swap，确保字体加载完成后立即替换fallback字体，避免布局偏移：

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap&font-display=swap" rel="stylesheet">

参考内容 #

《CSS Font Metrics, Line-Height And Vertical-Align》一文详细解释了字体度量、行高与垂直对齐的底层逻辑，能帮助理解这类居中问题的本质。

内容的提问来源于stack exchange，提问作者Flament Mickaël