Back
Next
Here you will learn about CSS fonts and how they are applied using Cascading Style Sheet.
We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the
font is installed on the PC used to access the website. The following CSS properties will be described:
CSS Font Properties.
CSS Font Family [font-family]
Cascading Style Sheet font-family property is used to set a prioritized
list of fonts to be used to display on website or given element. If the
first font on the list is not installed on the computer used to access
the website, the next font on the list will be tried until a suitable font
is found by the web browser.
| Syntax: |
font-family: [[<family-name> | <generic-family>],]*
[<family-name> | <generic-family>] |
| Possible Values: |
<family-name>
- Any font family name may be used for display
<generic-family>
- serif
(e.g., Times)
-
sans-serif (e.g.,
Arial or
Helvetica)
- cursive
(e.g., Zapf-Chancery)
- fantasy
(e.g., Western)
-
monospace (e.g.,
Courier)
|
| Default Value: |
Determined by browser |
| Applies to: |
All elements |
| Inherited: |
Yes |
Example of CSS Font Family
H1 { font-family: Courier New; }
P { font-family: Geneva, Arial, Helvetica, sans-serif; }
CSS Font Style [font-style]
CSS font-style property defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h1> will be shown in italics.
Details of CSS Font Style property is as under.
| Syntax: |
font-style: <value> |
| Possible Values: |
normal |
italic |
oblique |
| Default Value: |
normal |
| Applies to: |
All elements |
| Inherited: |
Yes |
Example of CSS Font Style
H1 { font-style: oblique }
P { font-style: normal }
CSS Font Variant [font-variant]
CSS font-variant property is used to choose between normal or small-caps variants of a font
in a website. A small-caps
font in Cascading Style Sheet is a font that uses smaller sized capitalized letters (Upper Case)
instead of lower case letters. Confused? Take a look at these details of CSS
Font Variant.
| Syntax: |
font-variant: <value> |
| Possible Values: |
normal |
small-caps |
| Default Value: |
normal |
| Applies to: |
All elements |
| Inherited: |
Yes |
Example of CSS Font Variant
SPAN { font-variant: small-caps }
CSS Font Weight [font-weight]
The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold
in a website. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a
text font. Details of CSS Font Weight is as under.
| Syntax: |
font-weight: <value> |
| Possible Values: |
normal |
bold |
bolder |
lighter |
100 |
200 |
300 |
400 |
500 |
600 |
700 |
800 |
900
|
| Default Value: |
normal
|
| Applies to: |
All elements |
| Inherited: |
Yes |
Example of CSS Font Weight
H1 { font-weight: 800 }
P { font-weight: normal }
CSS Font Size [font-size]
The size of a font is set by the property font-size in CSS.
There are many different units (e.g. percentages or pixels) to
choose from to describe font sizes in CSS. In this CSS Tutorial we will focus on
the most common and appropriate units. Details of CSS Font Size property
is as under.:
| Syntax: |
font-size: <absolute-size> | <relative-size> | <length>
| <percentage> |
| Possible Values: |
- <absolute-size>
- xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large
- <relative-size>
- <length>
-
<percentage> (in relation to parent element)
|
| Default Value: |
medium |
| Applies to: |
All elements |
| Inherited: |
Yes |
Example of CSS Font Size
H1 { font-size: x-small }
P { font-size: 20pt }
LI { font-size: 75% }
STRONG { font-size: x-larger }
CSS Font [font]
CSS Font short hand property it is possible to cover all the different font properties in one single property
while using Cascading Style Sheet in a website.
For example, imagine these four lines of code used to describe font-properties for <p>:
Example of CSS Font
P { font: italic bold 12pt/14pt Times, serif }
Back
Next
| 
Home 
