如何将 Google 字体导入 HTML/CSS？答案

【问题标题】：How to import Google Fonts to HTML/CSS?如何将 Google 字体导入 HTML/CSS？
【发布时间】：2021-09-20 22:13:59
【问题描述】：

我无法在我的 HTML 文件中使用 Roboto 字体。如果我理解正确，谷歌的指示是：

“将这些行复制到您的head 标签中”：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
<body>
    <h3>This is a heading</h3>
    <p>This is a string.</p>
</body>
</html>

网站显示标准字体，而不是 Roboto 字体：

【问题讨论】：

你有 CSS 说它应该在任何地方使用该字体吗？
不，我没有。我查一下

标签： html css fonts google-font-api

【解决方案1】：

在</head>之前添加这个

<style>
body {
  font-family: "Roboto", sans-serif;
}
</style>

【讨论】：

【解决方案2】：

你没有在css中使用字体系列，这样使用

<style>
body, h1,h2,h3,h4,h5,h6,p {
  font-family: "Roboto", sans-serif;
}
</style>

【讨论】：