浏览器默认字体加载而不是后备字体

Question

我正在努力让我的后备字体正确加载。借助新的上升覆盖、下降覆盖和大小调整属性，我已将 arial 拨入后备字体。

但是当页面加载时，我看到的是浏览器默认（在本例中）衬线字体，而不是加载的 Arial，然后是我的网络字体。

CSS

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato'), local('Lato-Regular'), url(https://my-media-server-url.com/static-4/webfont/lato/Lato-Regular.woff) format('woff');
}

@font-face {
    font-family: "Lato-Fallback-Arial";
    src: local("Arial");
    ascent-override: 101.3181%;
    descent-override: 21.865%;
    size-adjust: 97.4159%;
}

h1.main__title {
  font-family: Lato, Lato-Fallback-Arial, sans-serif;
}

.main__title {
  font-size: var(--text-4xl);
  font-weight: bold;
  line-height: 1.2;
}

相关的 HTML 只是一个

<h1 class="main__title">Story title here</h1>

我希望页面加载 h1 标签中的字体为 Arial，然后在加载后替换为 Lato。

我实际上看到了默认的衬线字体，按照浏览器默认的 h1 标签，然后 Lato 加载，看起来 Arial 根本没有使用过。

我似乎无法弄清楚我做错了什么。赞赏洞察力:)

Answer 1

您应该用“”包装

font-family

属性：

h1.main__title {
  font-family: "Lato", "Lato-Fallback-Arial", sans-serif;
}