HTML CSS Fonts
CSS Fonts can take number of selectors.
Possible values are:
- Size
- Style
- Family
- Variant
- Weight
- Line Height
.myFont{
font-size: large ;
font-style: italic ;
font-family: Times New Roman, Serif ;
font-variant: normal;
font-weight: bold ;
line-height: 200% ;
}
This creates a class called "myFont". This is what the text would look like
The font can also be declared in one statement; .myFont{ font: large italic bold 200% Times New Roman, Serif }
Personally, I have had issues with declaring all the font selectors in one statement, mainly it confuses me, so I prefer to use an individual line for each selector.
Font Selector Values
- Size
- % (percent)
- length
- xx-small
- x-small
- smaller
- small
- medium
- large
- larger
- x-large
- xx-large
- Style
- Oblique
- Italic
- Normal
- Family You can make 2 choices for family, a specific family name, or a genric name for browsers that may not support the font you are looking for. Ex: font-family: Verdana, sans-serif; Here is a list of common family variations
- Variant
- normal
- small-caps
- Weight
- bolder
- bold
- 900
- 800
- 700
- 600
- 500
- 400
- 300
- 200
- 100
- normal
- lighter
- Line Height
- normal
- number (to be multiplied by current font size to set line height)
- length in (px, em, cm)
- percentage % (Measured in percentage of current font size)
- initial (sets to default value)
- inherit (from parent document)
I hope you will join us for the next lesson Lesson 11) Links
Additional Resources