iPhone 11各浏览器中H1文本过粗问题求助

问题描述 #

在iPhone 11设备上，Safari、Google Chrome、Firefox等所有浏览器中的H1文本显示均异常粗厚，但安卓、Windows设备及iPad测试均无此问题。

相关代码 #

HTML #

<div id="pageName">
  <h1>home</h1>
</div>

CSS #

#pageName{
  display: inline-block;
  width: fit-content;
  vertical-align: top;
  height: 5.5vh;
  line-height: 5.5vh;
}
#pageName h1{
  margin: auto auto;
  vertical-align: middle;
  font-size: 4vh;
  color: #d45500;
  -webkit-font-smoothing: antialiased;
}

解决方案 #

1. 显式指定字体权重 #

iOS系统字体（如San Francisco）在特定场景下会自动加粗，即使未设置font-weight。给H1显式设置正常权重：

#pageName h1{
  /* 保留原有属性 */
  font-weight: 400; /* 多数字体的正常权重值，可根据实际字体调整 */
}

2. 调整字体平滑渲染属性 #

当前的-webkit-font-smoothing: antialiased在iOS上可能加剧文本粗厚感，尝试切换为子像素平滑：

#pageName h1{
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3. 替换vh单位避免异常缩放 #

vh单位在iPhone 11的视口下可能触发字体的异常放大，改用固定px或rem单位，或结合媒体查询适配：

#pageName h1{
  font-size: 24px; /* 按设计需求调整基础大小 */
}

@media (min-height: 812px) { /* 匹配iPhone 11屏幕高度 */
  #pageName h1{
    font-size: 4vh;
  }
}

4. 改用flex布局实现垂直居中 #

父元素的line-height结合子元素vertical-align可能导致渲染偏移，改用flex布局更稳定：

#pageName{
  display: inline-flex;
  align-items: center; /* 垂直居中 */
  width: fit-content;
  height: 5.5vh;
  /* 移除line-height: 5.5vh; */
}
#pageName h1{
  margin: 0; /* 移除auto margin */
  /* 其他属性保留 */
}

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