相同字体在不同操作系统浏览器中垂直对齐表现不一致问题咨询

可行解决方案如下： #

• 用固定内边距+行高替代依赖字体度量的居中逻辑
  不要使用align-items: center、vertical-align: middle这类对齐规则，改为通过上下内边距撑出容器高度，配合适配当前字体的行高实现统一对齐：

.target-element {
  /* 上下内边距根据设计要求调整，不要给元素设置固定height */
  padding: 6px 14px;
  /* 针对objektiv-mk2字体微调行高，直到Windows、Mac/Linux下对齐效果一致 */
  line-height: 1.15;
  font-family: objektiv-mk2, sans-serif;
}

如果必须使用固定高度的容器，改用grid布局实现居中，比flex布局对字体偏移的兼容性更好：

.target-element {
  height: 32px;
  display: grid;
  place-content: center;
}

• 通过@font-face参数强制修正字体度量
  不同系统对第三方字体的内置上升/下降/行间距参数解析规则不同，你可以直接在CSS的字体声明中添加度量覆盖属性，不需要修改原字体文件：

@font-face {
  font-family: 'objektiv-mk2';
  src: url('你的Typekit字体加载地址');
  /* 数值根据实际偏移量微调，一般调整幅度在0%-10%区间即可 */
  ascent-override: 94%;
  descent-override: 22%;
  line-gap-override: 0%;
}

• 针对Windows系统做定向修正
  通过JS判断系统环境，给Windows场景单独加偏移修正样式：

// 页面加载时执行
if (navigator.userAgent.includes('Windows')) {
  document.documentElement.classList.add('os-windows')
}

.os-windows .target-element {
  /* 根据实际偏移的像素值调整，向上偏就加padding-bottom，向下偏就加padding-top */
  padding-top: 1px;
  /* 也可以用transform: translateY(1px)做偏移修正 */
}

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