Latest web development tutorials

CSS Fonts (font)

CSS font properties define the font, bold, size, text style.

The difference between serif and sans-serif fonts between

Serif vs. Sans-serif

Remark 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 family - has a similar appearance font system combinations (such as "Serif" or "Monospace")
  • Specific font family - a specific font family (such as "Times" or "Courier")
Generic family Font family Explanation
Serif Times New Roman
End Serif fonts have extra characters in the line of decorative
Sans-serif Arial
"Sans" means without - these fonts at the end with no additional decoration
Monospace Courier New
Lucida Console
All monospaced characters have the same width

Font family

font-family property of the text font family.

font-family property should be set several font names as a "fallback" mechanism, if the browser does not support the first font, he will try the next font.

Note: If the name of the font family is more than one word, it must be enclosed in quotation marks, such as Font Family: "Times New Roman."

Multiple font family is specified by a comma-separated:


p{font-family:"Times New Roman", Times, serif;}

try it"

For more commonly used font combinations, look at our Web-safe fonts combinations .

Font style

Mainly attribute specifies the font style italic text.

This property has three values:

  • Normal - the normal display text
  • Italic - the text displayed in italics
  • Skewed character - one side is inclined to text (and very similar to italic, but less supported)


p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

try it"

font size

The size of the font-size property of the text.

Can manage the size of the text in the web design is very important. However, you can not adjust the font size to make paragraphs look like headings, or make the title look like paragraphs.

Be sure to use the correct HTML tags to <h1> - <h6> represents the title and <p> represents a paragraph:

Font size value can be absolute or relative size.

Absolute size:

  • Set the text of a specified size
  • We can not change the text size in all browsers
  • Determine the physical size of the output of the absolute size of the useful

Relative size:

  • With respect to the surrounding elements to set the size
  • It allows the user to change the text size in your browser

Remark If you do not specify a font size, the default size, and ordinary text paragraphs, it is 16 pixels (16px = 1em).

Setting the font size pixel

Setting the text size with pixels, gives you full control over the text size:


h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

try it"

The above example 9, Firefox, Chrome, Opera, and Safari, adjust the text size by scaling Internet Explorer browser.

Although you can adjust the text size via the browser's zoom tool, however, this adjustment is the entire page, not just text

Use em to set the font size

In order to avoid Internet Explorer can not be adjusted in the text, many developers use em units instead of pixels.

em-size unit is recommended by the W3C.

1em is equal to the current font size. In the browser default text size is 16px.

Therefore, the default size of 1em is 16px. The following formula can be converted to pixels em: px / 16 = em


h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

try it"

In the above example, em size of the text is the same as the previous example in pixels. However, if you use em units, you can adjust the text size in all browsers.

Unfortunately, IE is still the browser issue. Resize the text, it will be smaller than normal or larger in size.

Use a combination of percentages and EM

In all browsers solutions, set <body> element of the default font size is a percentage:


body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

try it"

Our code is very effective. In all browsers can display the same text size, and allows all browsers to zoom the text size.


More examples

Set the font bold
This example demonstrates how to set the font bold.

You can set the font change
This example demonstrates how to set the font changes.

All the font properties in one declaration
This example demonstrates how to use the shorthand property to set the font properties in one declaration.

All CSS font properties

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。