Question

我开始学习HTML和CSS的基础知识，目前正在通过FreeCodeCamp程序进行工作。目前，我无法创建一个帐户来访问那里的论坛，因此我将尝试在此处解决该问题。在问题内，它要求用户添加第二种字体并在顶部注释掉Google字体导入。一切都是正确的并被接受，因此H2元素必须使用“龙虾”字体。问题在于当前字体已经设置为“龙虾”。

我尝试在Lobster字体下添加一个单独的字体系列，但这删除了降级功能的功能。这没有用。我还尝试重新排列代码的格式，但是这样做会使它更加中断。这里是方向：

您的h2元素应使用龙虾字体。

您的h2元素在龙虾为时应降级为字体等宽字体   不可用。

通过输入以下内容来注释您对Lobster字体的Google通话

请确保通过添加->结束评论。

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

  h2 {
    font-family: Lobster, monospace;
  }

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

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="image-removed" alt="A cute orange cat lying on its back."></a>

  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality">                                                    Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
    </form>
    </main>

我希望一切都正确无误，并且这将是程序结尾的错误。不太可能..但我相信我能正确遵循指示。

Answer 1

在这个挑战中，您只需要编写即可。

h2 {
    font-family: Lobster,monospace;
  }

并注释google字体链接。

这个挑战只是告诉我们当浏览器没有获得主要字体（龙虾）时是如何工作的（采用等宽字体）。

Answer 2

可以使用此确切的行来解决该错误；

h2 {font-family：龙虾，等宽； }

仅当从 龙虾到等距后的分号 没有空间时，练习才有效。。。。。

这里是您可以复制粘贴的代码；

h2 {
    font-family: Lobster,monospace;
  }

字体降级问题

2 个答案: