html - 字体不适用于 Chrome 和 Firefox，但适用于 Safari

Question

我使用 css 创建了一个弹出式 div。这是我的代码。

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
.popups-right {
    background: #f57b20 none repeat scroll 0 0;
    border-radius: 40px;
    font-family: 'Oswald', sans-serif !important;
    color: #fff;
    font-size: 26px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    right: -120px;
    padding: 15px;
    position: absolute;
    text-align: center;
    width: 33%;
    line-height: 40px;
}

.popups-right::after {
    border-left: 0px solid transparent;
    border-right: 54px solid transparent;
    border-top: 20px solid #f57b20;
    bottom: -12px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

这是我的 HTML 代码

<div class="popups-right">
   <h3 style="color: #34213e;">ready to get fixed?</h3>
   <h3 style="color: #fff;">dont forget to include <br>this form in your order</h3>
   <h3 style="color: #fff;">simply click on this image <br>and start typing</h3>
   <h3 style="color: #fff;">please mark any areas you see <br>with pins. <span style="color: #34213e;">do not</span> use tape.</h3>
</div>

该字体在 Chrome 和 Firefox 中未按预期工作，但在 Safari 中工作良好。我对这个问题一无所知。请帮忙。

这是它在 safari 中的样子:

但这就是它在 chrome 和 firefox 上的工作方式:

该页面可在此处实时访问:http://alterknit.staging.wpengine.com/packing-slip/

Answer 1

给气泡中的每个标题一个类，例如.popups-right-title & 给样式

.popups-right-title {
  font-family: 'Oswald', sans-serif !important;
}

避免使用!important语句声明规则，这样以后就不会出现这样的问题。