Chapter 10 : CSS Font Properties
Sunday, 27 May 2012
0
comments
Inherited: Yes
Font
The font property can set the style, weight, variant, size, line height and font:
font: italic bold normal small/1.4em Verdana, sans-serif;
The above would set the text of an element to an italic style a bold weight a normal variant a relative size a line height of 1.4em and the font to Verdana or another sans-serif typeface.
Font-Family
You can set what font will be displayed in an element with thefont-family property.
- family-name
- generic family
If you set a family name it is best to also add the generic family at the end. As this is a priortized list. So if the user does not have the specified font name it will use the same generic family. (see below)
font-family: Verdana, sans-serif;
Font Size
You can set the size of the text used in an element by using thefont-size property.
font-size: value;
There are a lot of choices for values:
- xx-large
- x-large
- larger
- large
- medium
- small
- smaller
- x-small
- xx-small
- length
- % (percent)
There is quite a bit to learn about font sizes with CSS so, I am not even going to try to explain it. Actually there are already some great resources on how to size your text. (see below)
Font Style
You can set the style of text in a element with the font-styleproperty
font-style: value;
Possible values are
- normal
- itailc
- oblique
Font Variant
You can set the variant of text within an element with the font-variant property
font-variant: value;
Possible values are
- normal
- small-caps
Font Weight
You can control the weight of text in an element with the font-weight property:
font-weight: value;
Possible values are
- lighter
- normal
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- bold
- bolder
Categories:
CSS
