4.3 KiB
4.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aedf08808 | Specify How Fonts Should Degrade | 0 | Especifique cómo deben degradarse las fuentes |
Description
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 {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.
Familia tipográfica: Helvetica, sans-serif;
}
Instructions
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><!--</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><!--</code> in front of it.");'
- text: Asegúrese de cerrar su comentario agregando <code>--></code> .
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--></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