CSS：将font-family更改为-apple-system字体后，字体保持为Arial

如何解决CSS：将font-family更改为-apple-system字体后，字体保持为Arial

我想在我的网站上使用Airbnb为其网站使用的字体系列。它是“圆形的-apple-system，BlinkMacSystemFont，Roboto，Helvetica Neue，无衬线”。但是，在我将网站元素的字体系列设置为此后，该字体仍保留为默认Arial。一开始我还尝试了其他不带“ Circular”的-apple-system字体系列，但仍然无法正常工作。我在线搜索了教程，但没有提到将任何依赖项下载到项目中的任何提及。我想知道我错过了什么。谢谢！

解决方法

默认情况下，某些元素，例如buttons具有特定于浏览器的font-family。您需要为此专门inherit font-family。

见下文：

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

html {
  font-family: 'Bangers',cursive;
  font-size: 1rem;
  line-height: 1.5;
}

button.example {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

<p>
On <u>paragraphs</u> for example the <i>font-family</i>&nbsp&nbspis inherited on default unlike on <u>buttons</u>
</p>
<button>
  Not inherited
</button>
<button class="example">
   inherited
</button>