4.1 KiB
4.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd9aedf08808 | Specify How Fonts Should Degrade | 0 | https://scrimba.com/c/cpVKBfQ |
Description
monospace
, serif
and sans-serif
When one font isn't available, you can tell the browser to "degrade" to another font.
For example, if you wanted an element to use the Helvetica
font, but degrade to the sans-serif
font when Helvetica
wasn't available, you will specify it as follows:
p {Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
font-family: Helvetica, sans-serif;
}
Instructions
monospace
font to the h2
element, so that it now has two fonts - Lobster
and monospace
.
In the last challenge, you imported the Lobster
font using the link
tag. Now comment out that import of the Lobster
font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2
element degrades to the monospace
font.
NoteIf you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font.
Tests
tests:
- text: Your h2 element should use the font <code>Lobster</code>.
testString: assert($("h2").css("font-family").match(/^"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.');
- text: Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.
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: Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.
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: Be sure to close your comment by adding <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