跨度显示内联在 safari 上根本不显示

Question

所以我有一个奇怪的问题，我的所有display : inline跨度display : inline只是没有出现在 safari 上，即使我使用浏览器的控制台并将元素悬停在 DOM 中以获取其维度的预览没有出现任何内容并且框模型显示这个

而 firefox 或 chrome 显示正确的尺寸

如果我将 span 显示更改为inline-block一切都按原样显示，但在这种特定情况下我不能使用这样的 css 规则，因为 word break 不再起作用，我为横幅的每个字母使用了 span使用 js + css 为其设置动画的标题，因此我需要将其display : inline这是display : inline的结果display : inline在 firefox/chrome 上display : inline

在这里使用 firefox/chrome/safari 上的inline-block

因此，正如您所看到的，使用inline-block不是一种选择。

此外，我检查了我的整个网站的跨度，除非我添加display : inline-block所以它不是特定于我的横幅标题，否则它们都没有出现在 safari 中。 我所有跨度唯一通用的 css 就是这个

    span {
font-weight : 500;
line-height : 3rem;
/* 1rem = 10px in this case */
}

除了这两个 css 规则之外，它们中的大多数只是简单的跨度，有时会更改font-size或color 。

编辑 ：

为了更好地说明我的意思，当我使用 Safari 的开发工具将 h1 元素悬停时会发生什么

在这里，当我在使用display : inline时将任何跨度悬停在 h1 内时display : inline

最后，当我在使用display : inline-block时将一个跨度悬停在我的 h1 内时display : inline-block

编辑 2 ：经过数小时的搜索，问题似乎出自字体本身，当我使用另一个 Safari 显示我的 spans 元素时，仍然不知道如何解决该问题，但以防万一它可能指向正确的方向未来我要留下这张纸条

Answer 1

如果它可以帮助面临同样问题的人，我终于找到了问题，它直接来自字体文件，我再次将它们上传到我的服务器并且它起作用了