提问者:小点点

CSS:字体更改为-apple-system字体后仍为Arial


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


共2个答案

匿名用户

默认情况下,某些元素(如按钮)具有不同的浏览器特定字体系列。您需要专门为这些字体继承字体系列

见下文:

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

匿名用户

您的计算机没有安装圆形字体。在Airbnb上,它可以从CSS url中提供的下载。如果你想使用一些非标准字体,你需要为它们提供URL。您可以查看,例如fonts.google.com