freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08808	Specify How Fonts Should Degrade	0		Especifique cómo deben degradarse las fuentes

Description

Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen monospace , serif y sans-serif Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. Por ejemplo, si deseaba que un elemento usara la fuente Helvetica , pero se degradara a la sans-serif cuando Helvetica no estaba disponible, lo especificará de la siguiente manera:

pag {
Familia tipográfica: Helvetica, sans-serif;
}

Los nombres genéricos de las familias de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.

Instructions

Para empezar, aplique la fuente monospace al elemento h2 , de modo que ahora tenga dos fuentes: Lobster y monospace . En el último desafío, importó la fuente Lobster usando la etiqueta de link . Ahora comente la importación de la fuente Lobster (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento h2 se degrada a la fuente monospace . Nota
Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.

Tests

tests:
  - text: Tu elemento h2 debe usar la fuente <code>Lobster</code> .
    testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
  - text: Su elemento h2 debería degradarse a la fuente <code>monospace</code> cuando <code>Lobster</code> no está disponible.
    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: Comente su llamada a Google para la fuente <code>Lobster</code> colocando <code>&lt;!--</code> delante de ella.
    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: Asegúrese de cerrar su comentario agregando <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

4.3 KiB Raw Blame History