In addition to good-looking backgrounds and colors, font settings are also an important part of web design. Appropriate fonts will not only make the page more beautiful, but also improve the user experience. CSS provides a series of properties for setting text font styles, such as changing fonts, controlling font size and thickness, and so on.
By learning the above CSS properties, we can set the font, size, style, italic, bold, etc. for the text in HTML.
1. font-family
The font-family attribute is used to set the font of an element. The font is Song, Kai, etc.
Through the font-family attribute, multiple fonts can be declared at the same time, and the fonts are separated by commas. According to the font calling principle, the first font will be called first. If not found, the next font will be tried. If neither is found, the default font will be called.
Example:
For example, set the font for the text in the following <p> tag:
<p>dotcpp programming</p>
You can use a tag selector and then set it in the font-family attribute:
p{font-family:'TimesNewRoman','sans-serif',宋体,楷体;}When declaring fonts, we should declare English fonts and Chinese fonts separately, and the declaration of English fonts should be before the Chinese fonts. Because most Chinese fonts contain English letters, but they are not very beautiful, while English fonts do not contain Chinese characters. So if we don't want to use Chinese fonts to display English, we must remember to declare the English fonts first. The one declared first will be called first.
Commonly used English fonts: Arial, Helvetica, Tahoma, Verdana, Lucida Grande, Georgia, etc.
Commonly used Chinese fonts: SimSun, SimHei, Microsoft YaHei, FangSong, KaiTi, etc.
2.font-style
font-style sets the font style. You can set the font to italic, italic or normal font. An italic font is usually defined as an individual font within a font family.
Common attribute values for this genus are as follows:
3.font-weight
The font-weight attribute sets the boldness of the font used in the text of the displayed element.
Common property values for this property are as follows:
4.font-size
The font-size attribute is used to set the size of the font. The commonly used unit is px, which is pixels.
px is the abbreviation of Pixel, which is the smallest unit of digital images or graphics that can be displayed and represented on a digital display device. Pixel is the basic logical unit in digital graphics, and pixel is also called image element.
5. font-variant
The font-variant attribute can convert the lowercase English letters in the text into small caps (the converted upper case letters are similar in size to the pre-conversion lower case letters, so they are called small caps). Optional values for the font-variant attribute are as follows:
6. font
The font attribute is used to set all font attributes in one declaration, using spaces to separate each attribute. That is, the comprehensive abbreviation attribute of the above attributes.
If we use the font attribute to set the font style, the setting order is: font-style, font-variant, font-weight, font-size/line-height, font-family. It is not necessary to set any of the values, and the unset properties will use their default values.