What are the commonly used units for fonts in CSS?

Commonly used units for fonts in css are: 1. px (pixel), which is a unit of fixed size; 2. em, which is a relative length unit, relative to the font size of the parent element; 3. rem, which is a relative length unit , is the font size relative to the root node (or html node); 4. %, relative length unit, relative to the parent element.

The operating environment of this tutorial: Windows 10 system, CSS3, this article is applicable to all brands of computers.

Related recommendations: "CSS Video Tutorial"

1. Commonly used units for fonts in css are px, em, rem and %

1. px (pixel)

The name of the px unit is pixel, which is a unit of fixed size. The calculation of pixel is for (computer/mobile phone ) screen, a pixel (1px) is a point on the (computer/mobile phone) screen, that is, the minimum division of the screen resolution. Since it is a unit of fixed size, if a webpage designed with it alone is adapted to a large screen (computer), it will be very unfriendly on a small screen (mobile phone) and cannot achieve the adaptive effect.

Example:

nbsp;html>

 
  <meta> 
  <title>css px像素固定长度单位</title> 
  <style>
    body{background-color: #aaa;}
   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}
  </style>
 
  
  <div>
   用px单位设置元素的宽高和文本的字体大小
  </div> 
 

Run result:

##2, em (relative length unit)

The em unit is also commonly used, especially abroad; the name of the em unit is a relative length unit, which is used to set the font size of the text, relative to the font size of the text in the parent element object; if there is no artificial Sets the font size of the text within the current object, so it is relative to the browser's default font size (16px).

Example:

nbsp;html>

 
  <meta> 
  <title>用em相对长度单位来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
    .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
    .em{font-size:0.5em;}/*30px x 0.5 = 15px*/
  </style>
 
  
  <div>
   <span>用em相对长度单位来设置文本的字体大小</span>
  </div> 
 

Run result:

Explanation: The above example em is relative to the parent element div, and the div is set The font size is 30px, so the calculated font size of 0.5em is: 30px x 0.5 = 15px

3. rem (new relative length unit in css3)

Rem is a new relative length unit in CSS3. It appears to solve the shortcomings of em. Em can be said to be the font size relative to the parent element. When the font size of the parent element changes, it must be recalculated. The emergence of rem can solve such problems. rem is only relative to the root node, which is the HTML element. So as long as the font size is set on the html tag, the font size in the document will be based on this reference standard, which is generally used for adaptive layout.

nbsp;html>

 
  <meta> 
  <title>用css3新增的相对长度单位rem来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
   .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
   .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/ 
</style>
 
  
  <div>
   <span>用rem相对长度单位来设置文本的字体大小</span>
  </div> 
 

Note: rem is relative to the root element html element. The default font size of the browser is generally 16px. The calculated font size of all 0.5rem is: 16px x 0.5 = 8px, which has nothing to do with the 30px set by the parent element.

4. % (percentage)

% is also very common. It is almost the same as em, both Relative to the parent element. But % can be used in many attributes, such as: width, height, font-size, etc. Em is the unit used to set the font size (font-size). Properties such as width and height do not have em units.

2. The difference and summary of px, em, rem and %

• px is a fixed length unit and does not change randomly. Changes with changes in other elements;

• em and % are units relative to the parent element and will change with changes in the properties of the parent element (font-size or other attributes);

• rem is relative to the root directory (HTML element), so it will change with the attribute (font-size) of the HTML element;

• px and % are more widely used and can serve as units for more attributes, while em and rem are units for font size and are used as units for the font-size attribute

• Generally speaking: 1em = 1rem = 100% = 16 px

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of What are the commonly used units for fonts in CSS?. For more information, please follow other related articles on the PHP Chinese website!