& Lt; font & gt; peripheral knowledge points, & lt; font & gt; knowledge points

<Font> peripheral knowledge points <font> knowledge points

Em

1em = font-size value set by the element itself or inherited by the parent Element

1 
1 h1{font-size:24px;}2 h2{font-size:18px;}3 p{font-size:12px;}4 h1,h2,p{margin-left:1em;}


Font-weight
　　Value Range: 100 ~ 900 does not have a fixed thickening degree, which is generally equivalent to a specific deformation name. 400 corresponds to normal, 700 corresponds to bold, and others depend on the keyword.
Times imaginary bold

 

 
  
 
   
 
    
Font
 
    
Specify keywords
 
    
Number
 
   
 
   
 
    
TimesRegular
 
    
Normal
 
    
100,200,300,400
 
   
 
   
 
    
TimesBold
 
    
Bold
 
    
500,600,700,800,900
 
   
 
  

 
 
 
 
Bolder bold Based on parent Element
1 p {font-weight: normal;}/* 400, bold corresponds to 700, and the minimum value is 700 */2 p em {font-weight: bolder ;} /* 700 */3 4 h1 {font-weight: bold;}/* 700. If there is no keyword, set it to the next larger number, maximum: 900 */5 h1 B {font-weight: bolder;}/* 800 */
 

Font-size
No specified number. The initial value is medium. Larger is similar to bolder. It moves up based on the scaling factor of the parent element, but there is no absolute size range (900.
The percentage is also calculated based on the inherited size of the parent element.
These inheritance are level-1, and the more data is accumulated in nesting.
If px is used, the font size is fixed. Therefore, the user cannot adjust the text size before ie6. therefore, the keyword and percentage of the font size are better.


Text-indent
　　Text indentation also inherits.
1 <style type="text/css">2     #demo{text-indent:3%;}3 </style>
1 <div id="demo">2     This is the first line.3     <p>This is the second line while this will also <br>get the text indent style.</p>4 </div>


Line-height
1 <style type = "text/css"> 2 body {font-size: 10px; line-height: 10px ;} 3/* because the minimum font-size value of most browsers is 12px by default, the font size of the body is actually 12px */4 5. paragraphA {line-height: 1em;}/* inherits the font size of 12px, and the line-height is 12*1 = 12px */6. paragraphA p {font-size: 18px;}/* line-height is the inherited 12px */7 8. paragraphB {line-height: 1;}/* use a scaling factor to apply this element and all child elements, the line-height of each element is calculated as 12*1 = 12px */9 based on its own font size value. paragraphB p {font-size: 14px;}/* Self-size value * scaling factor: line-height: 14*1 = 14px */10 11. paragraphC p {font-size: 12px; line-height: 150%;}/* calculate the line-height as 12 * 150% = 18px */12 Based on the font size specified by the user </style>
1 <div class="paragraphA">2     <p>This is paragraph A which gets a line-height equals 12px.</p>3 </div>4 <div class="paragraphB">5     <p>This is paragraph B which gets a line-height equals 14px.</p>6 </div>7 <div class="paragraphC">8     <p>This is paragraph C which gets a line-height equals 18px.</p>9 </div> 


Vertical-align
The default value is baseline, which is aligned with the text baseline (the letter is "g" and the tail is below the baseline ).
Text-bottom: align with the line at the bottom of the text (the "bottom tangent" of the text and the tangent at the bottom of the tail ).
Bottom: the bottom of the line box is aligned (the row is larger than the font size, the bottom of the space occupied by the row height, and there is still a certain distance below the tail ).
 The percentage is higher than the baseline (Row Height) of the parent element or lower the specified amount.
Px: increases when positive values are positive, and decreases when negative values are negative.
Note that vertical-align can only be used for row or table cell elements.
 

References
Css authoritative guide 4th ~ Chapter 6