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

Question

我无法在我的 HTML 文件中使用 Roboto 字体。如果我没看错，Google的指令是：

“将这些行复制到您的 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 字体：

Answer 1

在</head>

之前添加这个

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

Answer 2

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

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

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

How to import Google Fonts to HTML/CSS?

html

css

fonts

google-font-api