9 CSS Font
9 CSS Font
CSS Fonts
The CSS font properties define the font
family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Example
Font Family
The font-family of a text is set with the font-family property
The font – family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar
font in the generic family, if no other fonts are available.
Example
Specify the font for three paragraphs:
Example
Specify the "Impact" font for a paragraph:
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
Font Weight
The font-weight property specifies the
weight of a font:
Font Variant
The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
Example
Font Shorthand
To shorten the code, it is also possible to specify
all the individual font properties in one property.
Example
Set some font properties with the
shorthand declaration:
Activities
Activity #1
S et the font family for the page to "Courier
New", and the font family for <h1> to "Verdana".
Activity #2
Show <p> elements as "italic" text.
Activity #3
S et the font size for the page to "20px", and
the font size for <h1> to "3em".
Activity #4
Show <p> elements as "bold" text.
Activity #
With the font property: Set the <p> to
"italic", "20px" and "Verdana".