问题描述
我想在我的网站上使用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>  is inherited on default unlike on <u>buttons</u>
</p>
<button>
Not inherited
</button>
<button class="example">
inherited
</button>