Josefin Sans与Open Sans文本垂直对齐问题求助

问题原因 #

Josefin Sans和Open Sans的字体度量设计存在差异，前者的升部/降部比例、基线位置和后者不同，导致浏览器渲染时文本视觉上出现向上偏移，并非flex布局或line-height的基础用法出错。

可行解决方案 #

1. 精准匹配line-height与容器高度 #

给容器固定高度，将line-height设置为完全等于容器高度，搭配vertical-align: middle强制文本垂直对齐：

/* 普通div容器示例 */
.text-container {
  font-family: 'Josefin Sans', sans-serif;
  height: 48px;
  line-height: 48px;
  vertical-align: middle;
}

/* Chakra UI Button直接用sx属性 */
<Button sx={{ fontFamily: 'Josefin Sans', height: '48px', lineHeight: '48px' }}>
  按钮文本
</Button>

2. 相对定位微调偏移 #

如果line-height无法完全修正，用相对定位的top属性微调文本位置，根据实际偏移量调整像素值（通常1-2px即可）：

.josefin-text {
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  top: 1px;
}

3. 自定义Chakra UI主题统一修正 #

在Chakra主题配置中全局修改Button的字体样式，避免每个组件重复设置：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontFamily: 'Josefin Sans, sans-serif',
        lineHeight: '1.25', // 适配字体的行高比例
        position: 'relative',
        top: '1px' // 全局微调偏移
      }
    }
  }
});

4. 调整字体大小与行高比例 #

尝试给Josefin Sans设置稍大的line-height比例（比如1.2-1.3），配合字体大小调整，实现视觉居中：

.josefin-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

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