The font property may be used font-style, font-family, font-weigth, font-variant, font-size, line-height short six attributes, described below, respectively.
1, font-style text italic
Parameters: oblique / normal / italic normal regular font selection of font-family; Oblique selection gradient body; Italic selected italics.
2, font-weight bold text
Parameters: normal (400) / bold (700) / lighter (thinner than a value inherited from the parent to the element) / bolder (thicker than a value inherited from the parent to the element) / number (a number between 1 and 1000 (containing <number> values between types)).
3, font-size text size
Parameters: 20px (Digital plus units) / keyword can use keywords, or em pixel digital value to define the font size.
Keywords: small / medium / large ...... networks can be used to define the font size. By defining a keyword font size on the body element, you can set the font size relative to anywhere on the page, is conducive to zoom the entire page font size.
Pixel: Use this method when needed accurate pixel. Fixed pixel size, but different browsers may display slightly different.
Combinations: keyword + pixels
em: em is a dynamically when defined or inherited property font-size, font size 1em equal to the element. If you do not set the size of the text in the page that 1em is equal to the browser's default text size is usually 16px If you set the font size for the body element 20px, then 1em = 20px, 2em = 40px conversion formula is as follows:
Pixel size em = Desired / pixel font size of the parent element
The body element may be provided font size is 62.5% (i.e. 62.5% of 16px default size) is equal to 10px. So 20px = 2em, 16px = 1.6em.
4, font-family text font
"Primary font", "alternate font 1", "2 Alternate Font" indicates if there is "primary font" is displayed "primary font" on the user's computer, if not select "Alternatively font 1", if not "Preparation choose font 1 ", that is," 2 font options. "
"English font", "Chinese character"; font-English characters in English, Chinese characters using a Chinese font;
5, font-variant paragraph to set the capital letters to small
This means that all lowercase letters will be converted to uppercase, all letters but use small-caps font compared to the rest of the text, its font size smaller.
Parameters: normal (the browser to display a standard font) / small-caps (small caps browser display font) / inherit (values inherited from the parent element font-variant property)
6, line-height line height
It represents the height of a line of text in the vessel occupied, if the line is equal to the height of the container and a high value, then the text will be centered vertically.
Parameters: normal / digital / length / percentage
Measuring multiple lines of text with high-line method:
a. First to know the size of the text b. The known distance c between the two lines of text. Measure the distance from the upper side to take / 2 d. + margin Margin row height is the height of the text on the +
(If b is an odd number, the margin will be less a text pixel, a pixel bottom margin will be more, it is even if the row height exactly)
example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font</title> <style> body{ font-size: 62.5%; } div{ border:1px solid red; font-size: 1.5em; font-style: oblique; font-weight: bold; font-family: Arial, Helvetica, sans-serif; line-height: 30px; font-variant: small-caps; } </style> </head> <body> <div>我的名字是davina</div> </body> </html>