Posts in current category

CSS Fonts (Font)

May 03, 2021 21:00 CSS

Table of contents

CSS font

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

The difference between serif and sans-serif fonts

CSS Fonts (Font)

CSS Fonts (Font) 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
Characters in the Serif font have extra decoration at the end of the line
Sans-serif Arial
"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

CSS Fonts (Font) 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:

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

Try it out . . .

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)

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

Try it out . . .

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

CSS Fonts (Font) 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:

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

Try it out . . .

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)

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 out . . .

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:

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

Try it out . . .

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.

CSS Fonts (Font)

More instances

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

CSS Fonts (Font)

All CSS font properties

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