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

【问题标题】：CSS: font remained as Arial after changing the font-family to -apple-system fontsCSS：将字体系列更改为 -apple-system 字体后，字体仍为 Arial
【发布时间】：2020-12-15 12:05:04
【问题描述】：

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

【问题讨论】：

标签： css font-family

【解决方案1】：

buttons 等某些元素默认具有不同的浏览器特定 font-family。你需要专门inheritfont-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>

【讨论】：

感谢您的回复！进口声明是否必要？我将 html 的 font-family 属性设置为“Circular，-apple-system ...”（我在问题中提出的那个），并将所需元素的 font-family 设置为“继承”，但它仍然不起作用.你能看看这个特定的字体系列吗？
您使用的是font-stack，前面是font，这不是system-font，在您的情况下是Circular。您的浏览器将循环遍历该 font-stack 列表并使用它识别的第一个 font，其他的要么被跳过（如果在该特定字体之前）或被忽略（如果在该特定字体之后），但为了识别 @ 987654333@ 它需要资源，在我的 Windows 计算机上它将显示Helvetica Neue，因为它是我的系统为其提供资源的第一个font。所以是的，对于非系统字体，您需要通过 @import 或 download 提供资源。