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

我使用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上的工作方式：

---

该页面可在此处实时访问：

给予类中的每个标题，例如

。弹出右标题

&给予样式

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

---

避免使用

！重要的

语句，用于声明规则，这样以后就不会出现此类问题。

为类中的每个标题指定标题，例如

。弹出右标题

&指定样式

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

---

避免使用

！重要的

声明，用于声明规则，以便将来不会出现此类问题。

显然，此声明：

字体系列：'Oswald'，sans serif！重要的不能一起工作

第二次渲染使用了一些
serif
字体，但没有使用您声明的
sans serif

使用DOM检查器/调试工具来发现覆盖您的规则的其他规则
 显然是这样的声明：
字体系列：'Oswald'，无衬线！重要的不能一起工作

第二次渲染使用了一些
serif
字体，但没有使用您声明的
sans serif

使用DOM检查器/调试工具来发现覆盖您的规则的其他规则
 
已弃用，请使用console调试出现的错误there@dippas我没有使用标签。请查看我的代码。
Alter Knit New York | 245 W 29街，MWS ProBeauty内9楼，纽约|纽约10001 | 212-473-6363（MEND）
版权所有2015©；Knit NY LLC.版权所有。
我正在谈论我发布的代码@DIPPASSILL已弃用。
已弃用，请使用控制台调试错误there@dippas我没有使用标签。请查看我的代码。
Alter Knit New York | 245 W 29街，MWS ProBeauty内9楼，纽约|纽约10001 | 212-473-6363（MEND）
版权所有2015©；Knit NY LLC.版权所有。
我正在谈论我发布的代码@dippasstill不推荐使用。请详细说明。当然，尝试后会让您知道。请详细说明。当然，尝试后会让您知道。这是Google Fonts建议的。建议的内容是什么？您没有抓住要点。我只是说CSS中的其他规则正在覆盖您的CSS。要找到该规则，请在浏览器中使用调试工具。Ohhh！！好的，对不起，我的不好。这是Google Fonts建议的。建议是什么？你没有抓住要点。我只是说CSS中的其他规则正在覆盖您的CSS。要找到该规则，请在浏览器中使用调试工具。Ohhh！！好的，对不起，我的错。