网页内容随不同字体变化答案

【问题标题】：Web page content changes with different fonts网页内容随不同字体变化
【发布时间】：2021-08-15 15:15:59
【问题描述】：

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

* {
    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

【问题讨论】：

如果您发布完整的 HTML 和 CSS，它会更容易为您提供帮助。为菜单项提供与导航栏高度相同的行高可能会有所帮助。

标签： html css fonts webfonts google-webfonts

【解决方案1】：

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

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

试试这个

【讨论】：

【解决方案2】：

您是否在标题标签中包含插件“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>

【讨论】：