May 03, 2021 CSS
2. The difference between serif and sans-serif fonts
9.. Use em to set the font size
11.. Use a combination of percentage and EM
CSS font properties define fonts, bold, size, and text styles.
On a computer screen, the sans-serif font is considered easier to read than the serif font
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:
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 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)
Typically, italic and oblique text looks exactly the same in a web browser.
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 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
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.
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.
This example shows how to set the font style.
Use the Build Font CSS Style Tool online to quickly generate CSS font styles
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. |