如何移除字母em-box多余空白 实现圆形logo内字母完美居中

问题表现 #

前端开发中使用单个字母作为Logo素材时，常遇到布局适配问题：字母的em-box（包含框）尺寸与字母实际渲染大小不匹配，预留空白要么过大要么尺寸不足，实际效果如下：

预期效果为容器尺寸与字母实际大小完全贴合，字母可像参考的'w' Logo一样在圆形背景中完美居中，但使用相同CSS样式实现的'b'字母位置偏移严重，无法达到预期效果。

现有实现代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@200&family=Press+Start+2P&display=swap');
.container {
  display: flex;
  gap: 30px;
}

.circle {
  display: flex;
  height: 175px;
  width: 175px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #1231b3;
}

.text {
  display: flex;
  font-family: 'Press Start 2P';
  font-size: 120px;
  color: white;
  background-color: light-blue;
}

.light {
  background: #7c8dd7;
}

HTML代码 #

<div class="container">
  <div class="circle">
    <div class="text">b</div>
  </div>
  <div class="circle">
    <div class="text light">b</div>
  </div>
</div>

问题根源 #

• 字体设计阶段就会在em框四周预留不等的边距（专业名称为side bearing），不同字体、不同字符的预留边距差异极大，flex布局默认的align-items: center和justify-content: center对齐的是字符的em-box，而非肉眼可见的实际字形轮廓。示例中使用的Press Start 2P属于像素风格字体，字形本身的上下边距设计不对称，直接居中必然出现偏移。

可落地的修复方案 #

• 手动微调位移：给字符元素添加相对定位，通过CSS transform做小幅度位移适配，针对当前字体和小写b字符，可在.text类中添加transform: translateY(0.08em);，数值可根据实际渲染效果微调，使用em作为单位可以跟随字体大小自动适配，不会因为字号变化失效。
• 现代浏览器原生适配：支持CSS Inline Layout Module Level 3的浏览器可以直接使用字体度量属性自动裁切多余留白，无需手动计算偏移值，在.text类中添加如下属性即可：

  .text {
    /* 保留原有样式 */
    leading-trim: both;
    text-edge: cap alphabetic;
  }
  

• 全场景兼容方案：如果需要兼容低版本浏览器，最稳妥的方式是将单字母Logo导出为SVG矢量图，彻底规避字体度量带来的边距问题，任意缩放都不会模糊，也不需要额外写适配样式。

内容的提问来源于stack exchange，提问作者Bru Mas Ribera