Safari中设置display:inline的span元素完全不显示问题排查求助

我遇到了一个奇怪的问题：所有设置了display : inline的span元素在Safari浏览器中完全不显示。即使我通过浏览器控制台在DOM树中悬停对应元素查看尺寸预览，也没有任何内容呈现。
Firefox或Chrome浏览器中，相同元素的尺寸显示完全正常，功能符合预期。
如果我把span的display属性改为inline-block，元素就能正常显示，但当前场景下我不能使用这个CSS规则：因为改完后自动换行功能会失效。我的横幅标题每个字母都用单独的span包裹，需要通过JS+CSS实现动画效果，所以必须保留display : inline属性。
我检查了全站的span元素，发现所有span在Safari中都无法显示，除非添加display : inline-block属性，因此这个问题并不局限于我的横幅标题。所有span共用的CSS规则只有以下内容：

span {
  font-weight: 500;
  line-height: 3rem;
  /* 本项目中1rem = 10px */
}

除了这两条CSS规则外，大部分span都是普通元素，部分会额外设置font-size或color属性。

补充验证信息 #

我通过Safari开发者工具做了进一步排查，现象如下：

• 悬停h1父元素时，元素尺寸预览完全正常
• 悬停h1内部设置了display : inline的span元素时，无任何尺寸预览，元素无内容渲染
• 悬停h1内部设置了display : inline-block的span元素时，尺寸预览正常，元素内容可正常显示

最终排查结论 #

经过数小时排查，发现问题根源似乎出在字体本身，更换其他字体后Safari就能正常显示span元素，目前还没找到针对原字体的修复方案，留下这条信息希望能给后续遇到相同问题的开发者提供排查方向。

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