4.4 KiB
4.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aedf08807 | Import a Google Font | 0 |
Description
Lobster
. لإجراء ذلك ، انسخ مقتطف الشفرة التالي وألصقه في الجزء العلوي من محرر الشفرة (قبل عنصر style
الافتتاحي): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
يمكنك الآن استخدام خط Lobster
في CSS باستخدام Lobster
باعتباره FAMILY_NAME كما في المثال التالي: font-family: FAMILY_NAME, GENERIC_NAME;
. GENERIC_NAME اختياري ، وهو خط احتياطي في حالة عدم توفر الخط المحدد الآخر. يتم تغطيتها في التحدي التالي. أسماء العائلة حساسة لحالة الأحرف وتحتاج إلى لفها بين علامتي تنصيص إذا كان هناك فراغ في الاسم. على سبيل المثال ، تحتاج إلى علامات اقتباس لاستخدام الخط "Open Sans"
، ولكن لا تستخدم خط Lobster
. Instructions
undefined
Tests
tests:
- text: ''
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
- text: ''
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
- text: استخدم محدد CSS <code>h2</code> لتغيير الخط.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
- text: يجب أن يستمر عنصر <code>p</code> استخدام <code>monospace</code> للخط.
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
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">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