Posts in current category
May 03, 2021 21:00 CSS
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|
Times New Roman
|Characters in the Serif font have extra decoration at the end of the line|
|"Sans" means none - these fonts have no extra trim at the end|
|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.
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
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
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