mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
refactor(curriculum): CSS Typography Quiz (#58507)
This commit is contained in:
Estefania Cassingena Navone
committed by
GitHub
GitHub
parent
2736b28852
commit
e699f2d9eb
+67
-67
@@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is the correct way to write a `@font-face` rule in CSS?
|
||||
Which of the following is the correct way to write an `@font-face` rule in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -39,73 +39,73 @@ Which of the following is the correct way to write a `@font-face` rule in CSS?
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the purpose of the offset values in the `text-shadow` property, and how do they affect the shadow's appearance?
|
||||
How do the offset values in the CSS `text-shadow` property affect the shadow's appearance?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
They adjust the text's size and weight.
|
||||
They adjust the weight and color of the shadow.
|
||||
|
||||
---
|
||||
|
||||
They change the shadow color.
|
||||
They change the color of the shadow.
|
||||
|
||||
---
|
||||
|
||||
They remove text from the shadow's path.
|
||||
They remove the text from the path of the shadow.
|
||||
|
||||
#### --answer--
|
||||
|
||||
They control the horizontal and vertical position of the shadow relative to the text.
|
||||
They control the position of the shadow relative to the text.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does "kerning" mean in typography?
|
||||
What does kerning refer to in the context of typography?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The space between lines of text.
|
||||
How the space between lines of text is adjusted to improve readability and aesthetics.
|
||||
|
||||
---
|
||||
|
||||
The overall spacing of a text block.
|
||||
How the overall spacing of a text block is adjusted for visual purposes.
|
||||
|
||||
---
|
||||
|
||||
The size of the font.
|
||||
How the font size is adjusted for accessibility purposes.
|
||||
|
||||
#### --answer--
|
||||
|
||||
The space between individual letters.
|
||||
How the space between specific pairs of characters is adjusted to improve readability and aesthetics.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What's the most common way to add Google Fonts to a website?
|
||||
What is a font family in the context of typography?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Use the `<font>` tag in the HTML file.
|
||||
A specific font style used for headings and body text.
|
||||
|
||||
---
|
||||
|
||||
Use the `@import` rule in JavaScript.
|
||||
A collection of text options for formatting text.
|
||||
|
||||
---
|
||||
|
||||
Embed the font within an image.
|
||||
A set of visually consistent colors used for text.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Use the `<link>` tag in the HTML file.
|
||||
A group of fonts that share similar design characteristics.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How do you import the Roboto font into your CSS using the `@import` rule?
|
||||
How do you import the `Roboto` font from Google Fonts into your CSS using the `@import` rule?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -127,11 +127,11 @@ How do you import the Roboto font into your CSS using the `@import` rule?
|
||||
|
||||
#### --text--
|
||||
|
||||
Which one of the following is a web-safe font?
|
||||
Which one of the following is a web safe font?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Comic Sans MS.
|
||||
Comic Sans MS
|
||||
|
||||
---
|
||||
|
||||
@@ -143,13 +143,13 @@ Impact
|
||||
|
||||
#### --answer--
|
||||
|
||||
Times New Roman.
|
||||
Times New Roman
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the `@font-face` rule do in CSS?
|
||||
What is the purpose of the `@font-face` rule in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -171,23 +171,23 @@ It allows you to use custom fonts by importing them.
|
||||
|
||||
#### --text--
|
||||
|
||||
Which service offers a large selection of free fonts that can be easily integrated directly into websites?
|
||||
What is the baseline in the context of typography?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Typekit
|
||||
The parts of lowercase letters that extend above the `x-height`.
|
||||
|
||||
---
|
||||
|
||||
Adobe Fonts.
|
||||
The average height of lowercase letters, excluding ascenders and descenders.
|
||||
|
||||
---
|
||||
|
||||
Font Universe.
|
||||
The height of uppercase letters, measured from the baseline to the top.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Google Fonts.
|
||||
The imaginary line on which most characters rest.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -197,63 +197,63 @@ Why is it important to include multiple font options in the `font-family` proper
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It reduces page load times.
|
||||
It reduces page load time by optimizing the process of loading fonts.
|
||||
|
||||
---
|
||||
|
||||
It prevents browser compatibility issues.
|
||||
It prevents browser compatibility issues by providing multiple options.
|
||||
|
||||
---
|
||||
|
||||
It gives the page more visual variety.
|
||||
It makes the web page more engaging and interactive.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It ensures a consistent experience in case the custom font doesn't load.
|
||||
It ensures a consistent user experience in case the custom font doesn't load.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the purpose of the `text-shadow` property in CSS, and how does it enhance text?
|
||||
What is the purpose of the `text-shadow` property in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Changes the text color.
|
||||
It changes the color and font family of the text.
|
||||
|
||||
---
|
||||
|
||||
Adds a background color to text.
|
||||
It adds a decorative border and background color to the text.
|
||||
|
||||
---
|
||||
|
||||
Makes text bold.
|
||||
It makes the text bold and adjusts the space between the characters.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Adds a shadow effect to text, making it stand out or appear 3D.
|
||||
It creates a visual effect by adding a blurred or offset duplicate of the text.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What CSS property is used to set the font family for an element, and how should fallback fonts be included?
|
||||
What is leading in the context of Typography?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`font-size`
|
||||
A group of fonts that share a common design.
|
||||
|
||||
---
|
||||
|
||||
`font-weight`
|
||||
How space is adjusted between specific pairs of characters in a block of text.
|
||||
|
||||
---
|
||||
|
||||
`text-align`
|
||||
How space is adjusted between all characters in a block of text.
|
||||
|
||||
#### --answer--
|
||||
|
||||
`font-family`, with multiple fonts listed to ensure compatibility across devices.
|
||||
The vertical space between lines of text.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -271,7 +271,7 @@ It ensures consistency across different devices.
|
||||
|
||||
---
|
||||
|
||||
It allows decorative fonts to be used effectively.
|
||||
It ensures that all text elements are the same size.
|
||||
|
||||
#### --answer--
|
||||
|
||||
@@ -281,7 +281,7 @@ It helps organize content and guide users through the information.
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is **not** a common font property?
|
||||
Which of the following is NOT a CSS property related to fonts?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -293,7 +293,7 @@ Which of the following is **not** a common font property?
|
||||
|
||||
---
|
||||
|
||||
`font-style`
|
||||
`font-family`
|
||||
|
||||
#### --answer--
|
||||
|
||||
@@ -325,67 +325,67 @@ Which of the following is a correct example of the `text-shadow` property in CSS
|
||||
|
||||
#### --text--
|
||||
|
||||
In the `text-shadow` property, how do the horizontal and vertical offsets affect the shadow's appearance?
|
||||
What are web safe fonts?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
They control the shadow's color.
|
||||
Fonts that provide advanced typographic features.
|
||||
|
||||
---
|
||||
|
||||
They define the shadow's blur radius.
|
||||
Fonts that automatically adjust to the user's preferred settings.
|
||||
|
||||
---
|
||||
|
||||
They adjust the opacity of the shadow.
|
||||
Fonts that are specifically designed for print media.
|
||||
|
||||
#### --answer--
|
||||
|
||||
They determine the position of the shadow relative to the text on the x and y axes.
|
||||
Fonts that are very likely to be available on most devices and browsers.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
For body text, why is a sans-serif font generally considered easier to read on screens compared to a serif font?
|
||||
Why are sans-serif fonts generally considered easier to read on screens than serif fonts?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Serif fonts are more decorative.
|
||||
Because they have small lines at the end of characters.
|
||||
|
||||
---
|
||||
|
||||
Sans-serif fonts are thicker.
|
||||
Because they are primarily used for decorative purposes.
|
||||
|
||||
---
|
||||
|
||||
Sans-serif fonts use fewer colors.
|
||||
Because they were specifically designed for print media.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Sans-serif fonts are typically simpler and more legible at smaller sizes on screens.
|
||||
Because they have simple and clean lines.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How do you list multiple font families in the `font-family` property?
|
||||
How do you specify multiple font families in the `font-family` property in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Separate them with spaces, and list the preferred font first.
|
||||
By separating them with spaces and listing the preferred font last.
|
||||
|
||||
---
|
||||
|
||||
Enclose them in parentheses.
|
||||
By separating them with commas and listing the preferred font last.
|
||||
|
||||
---
|
||||
|
||||
Enclose them in curly braces.
|
||||
By enclosing them in curly braces and listing the preferred font first.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Separate them with commas, and list the preferred font first.
|
||||
By separating them with commas and listing the preferred font first.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -417,39 +417,39 @@ Which of the following is a good practice when using fonts in web design?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Use only one font family throughout the website.
|
||||
Always using at least eight different font families throughout the website.
|
||||
|
||||
---
|
||||
|
||||
Always use decorative fonts for both headings and body text.
|
||||
Using decorative fonts for both headings and body text.
|
||||
|
||||
---
|
||||
|
||||
Avoid using fallback fonts at all costs.
|
||||
Avoiding fallback fonts whenever possible.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Combine no more than two or three font families for balance.
|
||||
Using no more than two or three font families to ensure visual consistency.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the purpose of the `line-height` property in CSS?
|
||||
What is tracking in the context of typography?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It sets the width of the text.
|
||||
The parts of lowercase letters that extend below the baseline.
|
||||
|
||||
---
|
||||
|
||||
It specifies the text alignment.
|
||||
The average height of lowercase letters, excluding ascenders and descenders.
|
||||
|
||||
---
|
||||
|
||||
It changes the text color.
|
||||
How space is adjusted between all lines of text in a block of text.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It controls the amount of space between lines of text.
|
||||
How space is adjusted between all characters in a block of text.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user