html - 字体适用于 IE，但不适用于 Firefox 或 Chrome

Question

我在制作的网站中遇到字体显示问题。我使用的是 ErasITC Light 字体。相关的 HTML 是:

<div class="heading">
<div class="container-fluid">
    <h1>make your voice heard</h1>
    <h2>it's time to let the people speak out</h2>
</div>

相关的 CSS 是:

.heading h1{
font-family: ErasITC, Eras Light ITC, sans-serif;
color: #ffffff;
font-size: 6.25vw;
font-weight: 300;
text-shadow: 2px 2px 15px black;
text-align:center;
margin-top: 21vh;

}

.heading h2{
    font-family: ErasITC, Eras Light ITC, sans-serif;
    color: #ffffff;
    font-size: 2.7vw;
    font-weight: 300;
    text-shadow: 2px 2px 10px black;
    text-align:center;
}

这在 IE 中有效，但在 Chrome 或 Firefox 中无效，它显示默认的 Sans-Serif 字体。

注意:我对某些元素使用 Bootstrap 。

谢谢，

格芬亚伯拉罕。

Answer 1

当您使用空格作为字体名称时，您必须将它们放在引号中，如下所示:

font-family: "Eras ITC", "Eras Light ITC", Sans-Serif;