网页内容随不同字体变化

如何解决网页内容随不同字体变化

我对不同的字体以及它们如何根据使用的字体更改网页有一个问题。我在这个网页中使用的主要字体是从 Google Fonts 导入的 Cairo，我的第二个选项是日内瓦。使用 Cairo 字体时，导航栏顶部有填充，但使用Geneva 字体时，该字体不适用于网页上的所有其他内容。我该如何解决这个问题

* {
    margin:0;
    padding:0;
    Box-sizing: border-Box;
}

body {
    font-family: 'Cairo',Geneva;
    background-color: #313131;
    color: white;
}

Cairo Font & Content Image - Geneva Font & Content Image

解决方法

您是否在标题标签中包含了插件“link rel”？`

    <head>
<link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet"> 
</head>

以您想要的字体开始，并以通用系列结束（如果没有其他字体可用，让浏览器在通用系列中选择相似的字体）。

  body {
       font-family: 'Cairo',Geneva,sans-serif;
       background-color: #313131;
       color: white; 
  }

试试这个