Example Analysis of different attributes of font in css
This article shares with you the content of an example analysis of the different properties of font in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Abbreviated order: style-variant-weight-size/line-height-family
Eg:
P {font:italicbold12px/30pxGeorgia,serif;}
Note: the values of font-size and font-family are required.
Introduce each attribute in order:
1. Font-style:normal (default); italic (italic); oblique (tilt); inherit
Italic is very similar to oblique style, but oblique compatibility is not good.
2. Font-variant:normall (default); small-caps (a font that displays small uppercase letters; meaning that all lowercase letters are converted to uppercase, but all letters using small-caps are smaller than the rest of the text); inherit
3. Font-weight:normal (default, 400); bold (700); bolder;lighter;inherit
4. Font-size:medium (default, medium); smaller (smaller than parent element); larger (larger size than parent element); length;%;inherit
The properties juxtaposed with medium are: xx-small,x-small,small,meidium,large,x-large,xx-large.
5. Font-family
Eg:
P {font-family: "TimesNewRoman", Time,serif;}
Write: (1) each value is separated by a comma. (2) if the font name contains spaces, it must be enclosed in double quotes. When using the "style" attribute in html, use single quotation marks.
Note: (1) on the computer screen, sans-serif fonts are considered easier to read than serif fonts. (2) font-family has family-name (specified series) and generic-family (usually font family). The use of a particular font depends entirely on whether the font is available on the user's machine, so it is highly recommended to use a common font family name as a back path.
Thank you for reading! This is the end of this article on "sample analysis of different attributes of font in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
