CSS Fonts (Font)

CSS font

---

CSS font properties define fonts, bold, size, and text styles.

---

The difference between serif and sans-serif fonts

On a computer screen, the sans-serif font is considered easier to read than the serif font

---

CSS type

In CSS, there are two types of font family names:

• Universal font family - a combination of font systems with a similar appearance (e.g. "Serif" or "Monospace")

• Specific font family - A specific font family (such as "Times" or "Courier")

Generic family	The font family	Description
Serif	Times New Roman Georgia	Characters in the Serif font have extra decoration at the end of the line
Sans-serif	Arial Verdana	"Sans" means none - these fonts have no extra trim at the end
Monospace	Courier New Lucida Console	All equal width characters have the same width

In addition to a variety of specific font series, CSS defines five common font familyes:

• Serif font
• Sans-serif font
• Monospace font
• Cursive font
• Fantasy font

---

The font family

The font-family property sets the font family of text.

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

Note: If the name of a font family exceeds one word, it must be quoted, such as Font Family: "Song."

Multiple font series are indicated separated by a comma:

For the more common font combinations, take a look at our web-secure font combinations.

---

The font style

The font style properties that are primarily used to specify italic text.

This property has three values:

• Normal - Normal display text

• Italic - Text displayed in italics

• Tilt text - Text tilts to one side (very similar to italics, but not very supported)

The difference between italic and oblique

• Italic is a simple font style with minor changes to the structure of each letter to reflect the changing appearance.
  
• Oblique text is a tilted version of normal vertical text.
  

Typically, italic and oblique text looks exactly the same in a web browser.

---

The font size

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

Whether you can manage the size of text is very important in web design. However, you can't resize a paragraph to look like a title, or to make a title look like a paragraph.

Be sure to use the correct HTML tag to represent the title and the paragraph of the paragraph:

The value of the font size can be absolute or relative.

Absolute size:

• Set a text of a specified size

• Users are not allowed to change the size of text in all browsers

• Absolute size is useful when determining the physical size of the output

Relative size:

• Set the size relative to the surrounding elements

• Allows the user to change the size of the text in the browser

If you don't specify the size of a font, the default size, like normal text paragraphs, is 16 pixels (16px=1em).

---

Set the font size pixels

Set the size and pixels of the text so you have complete control over the size of the text:

Examples above can be used to resize text on Internet Explorer 9, Firefox, Chrome, Opera, and Safari.

Note: The above instances cannot run in previous versions of IE9.

Although you can resize the text with the browser's zoom tool, this adjustment is the entire page, not just the text

---

Use em to set the font size

To avoid the inability to adjust text in Internet Explorer, many developers use em units instead of pixels.

The dimension units of em are recommended by W3C.

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

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

(Note: 16 is equal to the default font size of the parent element, assuming that the font-size of the parent element is 30px, then the formula needs to be changed to: pixels /30 s em)

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

Unfortunately, it's still a problem with the IE browser. When you resize text, it is larger or smaller than normal.

---

Use a combination of percentage and EM

In all browser solutions, the default font size for the element is set as a percentage:

Our code works very well. In all browsers, you can display the same text size and allow all browsers to scale the size of the text.

---

Set the font bold
This example shows how to make a font bold.

You can set the font transition
This example shows how to set up font changes.

All font properties in one declaration
This example shows how to set font properties within a declaration using short-case properties.

Set the font style

This example shows how to set the font style.

---

Build font CSS style tools online

Use the Build Font CSS Style Tool online to quickly generate CSS font styles

---

All CSS font properties

Property	describe
font	Set all font properties in a statement
font-family	Specify the font series
font-size	Specify the font size of the text
font-style	Specify the font style of the text
font-variant	Display text with small uppercase fonts or normal fonts.
font-weight	Specifies the thickness of the font.