段落文本未包装在Safari / iOS中

Question

我的网站定价很小。在我测试的每个浏览器中（Chrome，Firefox，IE，Safari for Windows，Chrome for Mac），它看起来完全符合预期：

不幸的是，在Safari for Mac，iOS Safari和Chrome for iOS中，＆＃34; MEMBERSHIP＆＃34;文本不会换行到下一行并被推到更远的位置：

由于我不知道任何移动检查员，我很难弄清楚为什么这个文字显示在错误的地方。

这是HTML：

<div id="home-cta-text">
    <p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
        MEMBERSHIPS AS LOW AS
    </p> 
    <div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
        <p><span>$19</span><sup>.99</sup></p>
        <p class="home-cta-subtext">PER MONTH</p> 
    </div>
    <div style="clear:both;"></div> 
</div>

适当的CSS：

#home-cta-text {
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.4);
    width: 377px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

#home-cta-right {
    float: left;
    width: 156px;
}

#home-cta-left p, #home-cta-mid p, #home-cta-right p {
    font-family: 'Franchise-Bold', Arial, sans-serif;
    font-size: 109px;
    color: #fff;
    line-height: 90px;
    padding-bottom: 0;
}

#home-cta-text p.home-cta-subtext {
    font-size: 40px;
    line-height: 40px;
}

#home-cta-text sup {
    position: relative;
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    font-size: 49px;
    display: inline;
    margin: 0;
    padding: 0;
    bottom: 43px;
}

谁能告诉我这里发生了什么？

编辑：我刚注意到如果删除@font-face字体，文本会正常包装。这是怎么回事？

Answer 1

尽量不要使用＆＃39; P＆＃39;只需使用DIV，只使用文本对齐中心

Answer 2

我在safari 10+上使用相同的字体时遇到完全相同的问题。适用于所有其他浏览器。看起来像Franchise Bold的问题。我将尝试再次下载，希望字体文件中出现错误。

编辑：显然我的资产中有错误的文件。从Weathersbee Type（http://www.weathersbeetype.com/fonts/franchise/）再次下载字体，它现在可以在Safari 10+（和所有其他浏览器）中使用。