font Property font CSS property
The syntax of CSS font property is
font: font-style font-variant font-weight font-size/line -height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
In fact, it is font-style, font-variant, font-weight, font -size, line-height, font-family attributes are abbreviated,
As for the caption, icon, menu, message-box, small-caption, status-bar attributes are not commonly used,
< p>And I don’t know how to use it, so I just ignore it.
When using the font abbreviation, the two attributes font-size and font-family must be specified, and neither is indispensable.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
The following lists the usage of the attributes under the font. When you understand all of them, you will know the usage of the abbreviated font attribute.
One, font-style
It has normal (default), italic, oblique
This is a paragraph, normal.
This is a paragraph, italic.
This is a paragraph, oblique.
The result is
In comparison, you will find that italic mode is italic, while onlique mode is more oblique.
Second, font-variant
The values are normal (default), small-caps
My name is Hege Refsnes.(normal)
My name is Hege Refsnes.(small-caps)
The result is
It can be seen that the small-caps mode will change all lowercase English letters to uppercase,
But pay attention to the size of the uppercase letters It will not get bigger.
Three, font-weight
This is a paragraph.(normal)
This is a paragraph.(lighter)
This is a paragraph.(100)
This is a paragraph.(bold)
This is a paragraph.(bolder)
This is a paragraph.(600)
The result is
According to the actual measurement results in chrome, the font thickness in normal mode seems to be equal to that of lighter and 100~500.
The font thickness in bold mode seems to be It means that bolder is also equal to 600~900.
Four, font-size
This is a paragraph.
This is a paragraph.(large)
This is a paragraph.(px)
This is a paragraph.(percent)
The result is
Font size font-size attribute has applicable values such as medium (default), xx-small, x-small, small, large,
x-large, xx-large, smaller, larger.
But I personally think that using px and% units will be more flexible.
Five, line-height
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
The result is
refers to the spacing between lines in a word, the value can be normal (default), pure number (with decimal point), px, %.
VI. font-family
Please see the font-family article
Reference data:< /p>
CSS Fonts @font-face
Original: Large column font Property