freeCodeCamp

5.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08808	Specify How Fonts Should Degrade	0		Укажите, как шрифты должны ухудшаться

Description

Существует несколько стандартных шрифтов, доступных во всех браузерах. Эти типовые семейства шрифтов включают в себя monospace , serif и sans-serif Когда один шрифт недоступен, вы можете сказать браузеру «ухудшить» другой шрифт. Например, если вы хотите, чтобы элемент использовал шрифт Helvetica , но ухудшался до шрифта sans-serif когда Helvetica недоступен, вы укажете его следующим образом:

п {
font-family: Helvetica, sans-serif;
}

Имена общих имен шрифтов не чувствительны к регистру. Кроме того, им не нужны кавычки, потому что они являются ключевыми словами CSS.

Instructions

Для начала примените monospace шрифт к элементу h2 , так что теперь он имеет два шрифта - Lobster и monospace . В последнем вызове вы импортировали шрифт Lobster используя тег link . Теперь прокомментируйте, что импорт шрифта Lobster (используя HTML-комментарии, которые вы узнали ранее) из Google Fonts, чтобы он больше не был доступен. Обратите внимание, как ваш элемент h2 ухудшается до monospace шрифта. Заметка
Если на вашем компьютере установлен шрифт Lobster, вы не увидите ухудшения, потому что ваш браузер сможет найти шрифт.

Tests

tests:
  - text: Ваш элемент h2 должен использовать шрифт <code>Lobster</code> .
    testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
  - text: 'Ваш h2-элемент должен деградировать до <code>monospace</code> шрифта, если <code>Lobster</code> недоступен.'
    testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");'
  - text: 'Прокомментируйте свой звонок в Google для шрифта <code>Lobster</code> , поставив <code>&lt;!--</code> перед ним.'
    testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.");'
  - text: 'Обязательно закройте свой комментарий, добавив <code>--&gt;</code> .'
    testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--&#62;</code>.");'

Challenge Seed

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

<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="https://bit.ly/fcc-relaxing-cat" 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>

Solution

// solution required

5.1 KiB Raw Blame History Unescape Escape