在 freecodecamp.com 上导入 google 字体答案

【问题标题】：Importing a google font on freecodecamp.com在 freecodecamp.com 上导入 google 字体
【发布时间】：2015-09-15 04:50:51
【问题描述】：

我正在 freecodecamp.com 上上第 15 课，但我似乎无法完成它。目标是让我的 h2 元素使用 'Lobster' 字体，同时保留 Monospace。我应该复制“http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>”。这是我写的代码：

<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<style>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</style>

<h2 class='red-text'>CatPhotoApp</h2>

<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

【问题讨论】：

标签： html css google-font-api

【解决方案1】：

<head>
      <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  <style>
       .red-text {
       color: red;
       }

     p {
         font-size: 16px;
         font-family: Monospace;
       }

    h2 { 
         font-size: 16px;
         font-family: Lobster; 
       }
  </style>
</head> 

    <h2 class="red-text";>CatPhotoApp</h2>

    <p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

    <p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

上面的代码帮助我进入下一步。我最初将龙虾字体的调用放在 CSS 样式中，哎呀！最后我找到了这个网站和下面的链接 (https://developers.google.com/fonts/docs/getting_started) 来帮助我意识到我需要在样式之前创建一个头部并将调用放在那里 (head)，当然是从说明中复制和粘贴的。

【讨论】：

【解决方案2】：

您需要使用 'Lobster' 作为字体系列：

<link href="https://fonts.googleapis.com/css?family=Lobster" 
rel="stylesheet" type="text/css">
<style>
 .red-text {
   color: red;
  }

h2 {
   font-family: 'Lobster';
}

 p {
   font-size: 16px;
   font-family: monospace;
  }
 </style>

【讨论】：

【解决方案3】：

您输入的 sn-p 也存在一些问题：

<link> 标签位于 <head> 而不是 <style> 标签中。
最好将<style>标签本身放在<head>标签中

这是一个示例：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

        <style>
            .red-text {
                color: red;
            }

            p {
                font-size: 16px;
                font-family: Monospace;
            }

            h2 {
                font-size: 16px;
                font-family: Lobster;
            }
        </style>
    </head>
    <body>

        <h2 class='red-text'>CatPhotoApp</h2>

        <p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the
            red dot, hairball run catnip eat the grass sniff.</p>

        <p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the
            sink fluffy fur catnip scratched.</p>

    </body>
</html>

【讨论】：

这如何使H2 元素使用Lobster？
你是对的@Bond，我错过了 h2 位；）将其包含在示例中。谢谢。

【解决方案4】：

所以，你需要使用 Lobster 作为字体系列：

h2 {
    font-family: Lobster;
}

【讨论】：

这如何使H2 元素使用Lobster？

【解决方案5】：

style>
  .red-text {
    color: red;

  } 

  h2 { font-family : Lobster}

   p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

这是正确答案

【讨论】：