CSS：将字体系列更改为 -apple-system 字体后，字体仍为 Arial

Question

我想在我的网站上使用 Airbnb 为其网站使用的字体系列。它是“Circular、-apple-system、BlinkMacSystemFont、Roboto、Helvetica Neue、sans-serif”。但是，在我将网站元素的字体系列设置为此后，字体仍为默认 Arial。我还尝试了其他一开始没有“Circular”的苹果系统字体系列，但它仍然不起作用。我在网上搜索了教程，没有看到任何提及将任何依赖项下载到项目中的内容。我想知道我错过了什么。谢谢！

Answer 1

某些元素（如

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>

Answer 2

您的计算机没有安装 Circular 字体。在 Airbnb 上，它是从 CSS url 中提供的下载的。如果你想使用一些非标准字体，你需要提供它们的网址。您可以检查，例如fonts.google.com

Answer 3

@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>