freeCodeCamp/import-a-google-font.chinese.md at 4f32fedb8ef314c6004d7e9285ae61731c4e2136

Files

Zhicheng Chen 4f32fedb8e fix(i18n): update review suggestion

2020-02-11 15:42:42 +09:00

3.7 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
bad87fee1348bd9aedf08807	Import a Google Font	0	https://scrimba.com/c/cM9MRsJ	18200	引入谷歌字体

Description

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。 Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。因此，下一步，我们将引入和使用Google字体。引入Google字体，你需要复制Google字体的 URL，并粘贴到 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签之前。 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;. GENERIC_NAME是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。

Instructions

创建一个 CSS 规则，font-family属性里设置为Lobster字体，并把这个字体应用到所有的h2元素。

Tests

tests:
  - text: '引入<code>Lobster</code>字体。'
    testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code));
  - text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
    testString: assert($("h2").css("font-family").match(/lobster/i));
  - text: '使用<code>h2</code>选择器去改变字体样式。'
    testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code));'
  - text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
    testString: assert($("p").css("font-family").match(/monospace/i));

Challenge Seed

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

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

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">点击查看更多<a href="#">猫图</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>

  <div>
    <p>猫咪最喜欢的三件东西：</p>
    <ul>
      <li>猫薄荷</li>
      <li>激光笔</li>
      <li>千层饼</li>
    </ul>
    <p>猫咪最讨厌的三件东西：</p>
    <ol>
      <li>跳蚤</li>
      <li>打雷</li>
      <li>同类</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

Solution

// solution required

3.7 KiB Raw Blame History Unescape Escape