CSS Font
CSS font properties define the font, boldness, size, and text style.
The difference between serif and sans-serif fonts
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
CSS Font
In CSS, there are two types of font family names:
- Generic font families- A group of font families with similar appearances (such as "Serif" or "Monospace")
- Specific font families- A specific font family (such as "Times" or "Courier")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
In Serif fonts, characters have extra decoration at the ends of strokes. |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts have no extra decoration at the ends. |
| Monospace | Courier New Lucida Console |
All monospaced characters have the same width. |
Font family
The font-family property sets the font family of the text.
The font-family property should set several font names as a "fallback" mechanism. If the browser does not support the first font, it will try the next one.
NoteIf the name of a font family is more than one word, it must be enclosed in quotation marks, such as font-family: "SimSun".
Multiple font families are specified separated by commas:
For more commonly used font combinations, see ourWeb safe font combinations。
Font style
The font-style property is mainly used to specify italic text.
This property has three values:
- Normal - displays text normally
- Italic - displays text in italic
- Oblique text - text leans to one side (very similar to italic, but less supported)
Example
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Try it Yourself »
Font size
The font-size property sets the size of the text.
Being able to control text size is very important in web design. However, you cannot make paragraphs look like headings, or headings look like paragraphs, by adjusting font size.
Please be sure to use the correct HTML tags, such as <h1> - <h6> for headings and <p> for paragraphs:
Font size values can be absolute or relative sizes.
Absolute size:
- Set text to a specified size
- Does not allow users to change the text size in all browsers.
- Absolute size is useful when the physical size of the output is known.
Relative size:
- Set size relative to surrounding elements
- Allows users to change the text size in the browser.
If you do not specify a font size, the default size is the same as normal text paragraphs: 16 pixels (16px = 1em).
Set font size in pixels
Setting the text size in pixels gives you full control over the text size:
The above example can adjust text size by zooming the browser in Internet Explorer 9, Firefox, Chrome, Opera, and Safari.
Although the text size can be adjusted with the browser's zoom tool, this adjustment is for the entire page, not just the text.
Set font size using em
To avoid the problem of text being unadjustable in Internet Explorer, many developers use the em unit instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in a browser is 16px.
Therefore, the default size of 1em is 16px. You can convert pixels to em using the following formula:px/16=em
Example
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Try it Yourself »
In the above example, the text size in em is the same as the pixels in the previous example. However, if you use the em unit, the text size can be adjusted in all browsers.
Unfortunately, the problem still exists with IE browsers. When the text size is adjusted, it becomes larger or smaller than the normal size.
Using percentage and EM combinations
The solution for all browsers is to set the default font size of the <body> element as a percentage:
Example
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Try it Yourself »
Our code is very effective. It can display the same text size in all browsers and allows all browsers to zoom the text size.
More Examples
Set font bold
This example demonstrates how to set the boldness of text.
You can set font transformation
This example demonstrates how to set the font variant.
All font properties in one declaration
This example demonstrates how to use the shorthand property to set all font properties in one declaration.
All CSS font properties
| Property | Description |
|---|---|
| font | Set all font properties in one declaration. |
| font-family | Specifies the font family of the text |
| font-size | Specifies the font size of the text |
| font-style | Specifies the font style of the text |
| font-variant | Display text in small-caps or normal font. |
| font-weight | Specifies the weight of the font. |