CSS에서 일반적으로 사용되는 글꼴 단위는 무엇입니까?

CSS에서 일반적으로 사용되는 글꼴 단위는 다음과 같습니다. 1. 고정 크기 단위인 px(픽셀) 2. 상위 요소의 글꼴 크기에 상대적인 상대적 길이 단위인 em rem은 상위 요소의 글꼴 크기에 상대적인 상대적 길이 단위입니다. 루트 노드(또는 html 노드)의 글꼴 크기는 4, %, 상위 요소에 대한 상대적 길이 단위입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3, 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

관련 추천: "CSS 동영상 튜토리얼"

1. CSS에서 일반적으로 사용되는 글꼴 단위는 px, em, rem 및 %

1. px(픽셀)

이름 px 단위는 픽셀이며 고정된 크기의 단위입니다. 픽셀 계산은 (컴퓨터/휴대폰) 화면에 대한 것입니다. 1픽셀(1px)은 (컴퓨터/휴대폰) 화면의 한 점입니다. 화면 해상도의 최소 분할입니다. 고정된 크기의 단위이기 때문에 그것만으로 디자인한 웹페이지를 큰 화면(컴퓨터)에 적용한다면 작은 화면(휴대폰)에서는 매우 불편하고 적응 효과를 얻을 수 없습니다.

예:

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> 
 

연산 결과:

2.em(상대 길이 단위)

em 단위는 특히 해외에서도 흔히 사용됩니다. 이는 상위 요소 개체의 텍스트 글꼴 크기를 기준으로 텍스트의 글꼴 크기를 설정하는 데 사용됩니다. 현재 개체의 텍스트 글꼴 크기를 수동으로 설정하는 사람이 없으면 브라우저의 기본 글꼴을 기준으로 합니다. 크기(16px)입니다.

예:

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> 
 

실행 결과:

설명: 위의 예 em은 상위 요소 div에 상대적입니다. div에서 설정한 글꼴 크기는 30px이므로 계산된 글꼴 크기 0.5em은 30px입니다. x 0.5 = 15px

3, rem(css3의 새로운 상대 길이 단위)

rem은 em의 단점을 해결한 것으로 보입니다. 요소 상위 요소의 글꼴 크기가 변경되면 글꼴 크기를 다시 계산해야 합니다. rem의 출현은 이러한 문제를 해결할 수 있습니다. rem은 HTML 요소인 루트 노드에만 관련됩니다. 따라서 html 태그에 글꼴 크기가 설정되어 있으면 문서의 글꼴 크기는 일반적으로 적응형 레이아웃에 사용되는 이 참조 표준을 기반으로 합니다.

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> 
 

참고: rem은 루트 요소인 html 요소에 상대적입니다. 브라우저의 기본 글꼴 크기는 일반적으로 16px입니다. 모든 0.5rem의 계산된 글꼴 크기는 16px x 0.5 = 8px입니다. 상위 요소 30px는 중요하지 않습니다

4.%(백분율)

%도 em과 거의 동일하며 둘 다 상위 요소에 상대적입니다. 그러나 %는 너비, 높이, 글꼴 크기 등과 같은 다양한 속성에 사용될 수 있습니다. Em은 글꼴 크기(font-size)를 설정하는 데 사용되는 단위입니다. 너비, 높이 등의 속성에는 em 단위가 없습니다.

2. px, em, rem 및 %

• px의 차이점과 요약은 고정된 길이 단위이며 다른 요소의 변경에 따라 변경되지 않습니다.

• em과 %는 상대적입니다. 상위 요소로 단위는 상위 요소의 속성(글꼴 크기 또는 기타 속성)으로 변경됩니다.

• rem은 루트 디렉터리(HTML 요소)에 상대적이므로 HTML의 속성으로 변경됩니다. 요소(글꼴 크기) 변경;

• px 및 %는 더 널리 사용되고 더 많은 속성의 단위로 사용될 수 있는 반면, em 및 rem은 글꼴 크기의 단위이며 글꼴 크기 속성의 단위로 사용됩니다

• 일반적으로 예: 1em = 1rem = 100% = 16 px

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS에서 일반적으로 사용되는 글꼴 단위는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!