Font Styling Quiz: Test your CSS font knowledge

📚 Quick Study Guide

🔍 Font families specify the typeface used (e.g., Arial, Times New Roman). Use generic fallbacks (serif, sans-serif) for browser compatibility. 🎨 `font-weight` controls the boldness of the text. Common values: `normal`, `bold`, `lighter`, `bolder`, or numeric values (100-900). 📐 `font-size` sets the size of the font. Use relative units like `em` or `rem` for accessibility. ✍️ `font-style` applies italic or oblique styling. Options include `normal`, `italic`, and `oblique`. ↔️ `font-variant` controls the display of variant glyphs (e.g., small caps). Uncommon but useful for specific typographical effects. 📏 `line-height` sets the spacing between lines of text. A value without units is multiplied by the font size. 📝 Shorthand property: `font: font-style font-variant font-weight font-size/line-height font-family;`

🧪 Practice Quiz

1. Which CSS property is used to change the typeface of text?
   1. font-weight
   2. font-style
   3. font-family
   4. text-decoration
2. What does the `font-weight` property control?
   1. The color of the font
   2. The boldness of the font
   3. The size of the font
   4. The style of the font (italic, oblique)
3. Which CSS unit is generally recommended for font sizes to maintain accessibility?
   1. px
   2. pt
   3. em
   4. cm
4. What is the purpose of the `font-style` property?
   1. To change the boldness of text
   2. To apply italic or oblique styling
   3. To set the size of the font
   4. To change the font family
5. Which property controls the spacing between lines of text?
   1. font-size
   2. letter-spacing
   3. word-spacing
   4. line-height
6. In the `font` shorthand property, which order are `font-size` and `line-height` specified?
   1. font-size line-height
   2. line-height font-size
   3. They cannot be used together
   4. Only font-size is allowed
7. Which value of `font-weight` represents the normal font weight?
   1. bold
   2. lighter
   3. normal
   4. bolder