Question

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

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

Answer 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），以帮助我意识到我需要在样式之前创建一个头，然后将调用放在那里（头部），当然要复制并粘贴。< / p>

Answer 2

您需要使用＆＃39; Lobster＆＃39; 作为font-family：

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

Answer 3

因此，您需要将Lobster用作font-family：

h2 {
    font-family: Lobster;
}

Answer 4

您提供的代码段也存在一些问题：

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

Answer 5

style>
  .red-text {
    color: red;

  } 

  h2 { font-family : Lobster}

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

这是正确答案

在freecodecamp.com上导入谷歌字体

5 个答案: