网页内容随不同字体变化

Question

我对不同的字体以及它们如何根据使用的字体更改网页有疑问。我在这个网页中使用的主要字体是从 Google Fonts 导入的 Cairo，我的次要选择是 Geneva。使用 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

Answer 1

您是否在 header 标签中添加了插件“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>

`

Answer 2

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

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

试试这个

网页内容随不同字体变化

Web page content changes with different fonts

html

css

fonts

webfonts

google-webfonts