Safari中CSS initial-letter属性无法继承font-family问题求助

问题现象 #

• 在Chrome/Blink内核浏览器中，initial-letter属性可正常继承body上设置的font-family，实现首字下沉效果。
• 在移动端及桌面端Safari（WebKit内核）中，当body设置OpenDyslexic字体时，首字下沉渲染异常；尝试显式添加字体继承代码、直接指定font-family: "OpenDyslexic" !important;均无法修复问题。

所用CSS代码 #

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) { 
    p.para::first-letter { 
        -webkit-initial-letter: 2;
        initial-letter: 2;
        text-transform: uppercase;
        margin-right: 0.3em;
        margin-top: 0.1em;
    }
}

原因推测 #

该问题源于WebKit内核对非本地字体的处理Bug，7年前已有类似未解决案例在Stack Overflow出现。

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