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

Question

So I'm having a strange issue where all my spans that are display : inline just don't appear on safari even when I use the browser's console and hover the element in the DOM to get the preview of its dimension nothing appears and the box Model shows this

Whereas firefox or chrome shows the correct dimensions

If I change the span display to inline-block everything appears as it should but I canno't use such css rule in this specific case because the word break won't work anymore, I'm using a span for each letter of my banner title to animate it with js + css so I need it to be display : inline Here's the result with display : inline on firefox/chrome

And here with inline-block on firefox/chrome/safari

So as you can see using inline-block is not an option.

Also I checked my entire website for spans and none of them appear on safari unless I add display : inline-block so it's not specific to my banner title. The only common css to all my spans is this one

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

Apart from these two css rules most of them are just plain spans with sometimes font-size or color changes.

Edit :

To better show what I mean this is what happens when I hover my h1 element using Safari's dev tools

And here when I hover any span inside that h1 while it's using display : inline

And finally when I hover a span inside my h1 while using display : inline-block

Edit 2 : After hours of search it seems like the problem comes from the font itself, when I use another one Safari shows my spans elements, still no idea on how to fix that but in case it might point someone in the right direction in the future I'm leaving this note

Answer 1

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