使用自定义衬线字体时input元素内文本垂直居中问题求解

该错位问题本质是浏览器计算行盒时默认使用字体自带的度量参数，含下行部的衬线字体的descent值偏大，导致input内文本的基线位置偏移。以下是符合W3C规范的无hack实现方式：

1. 使用CSS字体度量覆盖属性调整字体内置参数 #

该属性组属于W3C CSS Fonts Module Level 4提供的标准能力，专门用于自定义Web字体的度量值，不需要修改字体文件，也不需要硬编码padding数值：

/* 定义自定义字体时新增三个覆盖参数 */
@font-face {
  font-family: 'Source Serif Pro';
  src: url('字体资源地址') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* 调整以下三个参数对齐基线，浏览器会自动基于参数计算行高和内边距 */
  ascent-override: 90%; /* 控制字体上行部高度，可根据实际字体微调 */
  descent-override: 10%; /* 控制字体下行部高度，缩小该值可避免文本被向上推 */
  line-gap-override: 0%; /* 控制行间距，通常设置为0即可 */
}

参数调整逻辑：ascent-override 与 descent-override 的值之和等于100%时，字体的em-box会和内容盒完全匹配，浏览器会自动计算input的内边距，不需要手动设置padding-top。

2. 配合input的基础样式重置 #

确保input的默认样式不会干扰对齐逻辑：

input {
  font-family: 'Source Serif Pro', serif;
  /* 统一盒模型规则 */
  box-sizing: border-box;
  /* 移除浏览器默认的不对称内边距，由字体度量自动计算内部空间 */
  padding: 0;
  /* 行高设置为normal，让浏览器基于字体参数自动计算 */
  line-height: normal;
  /* 如需要额外内边距，使用对称值即可，不需要单独调整顶部 */
  /* padding: 0.25em 0.5em; */
}

兼容性处理 #

上述属性已经在Chrome 87+、Firefox 89+、Safari 15.4+版本得到全面支持，覆盖全球95%以上的活跃用户。如果需要兼容更低版本浏览器，可以配合CSS @supports做优雅降级：

@supports not (ascent-override: 100%) {
  input {
    /* 仅低版本浏览器生效的兼容内边距 */
    padding-top: 2px;
  }
}

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