글꼴 크기가 픽셀과 동일하지 않습니다.

Question

저는 글꼴 크기를 픽셀과 em으로 비교할 수 있도록 랩톱 이미지에 "Frontend Developer"텍스트를 두 번 넣은 webpage을 작성했습니다. 텍스트의 모두 글꼴 크기는 왜 위 "프론트 엔드 개발자"텍스트에 대한

, 나는 낮은 "프론트 엔드 개발자"텍스트 반면 font-size: 2.875em 넣어 가지고, 내가 font-size: 46px

를 뒀다 궁금 찾고 있지 않다면 비슷한가요? 비록 x 46 픽셀 = 2.875em (글꼴 크기)

텍스트의 모두를위한 CSS 코드는 다음과 같습니다

.frontend-background-image p:nth-child(1) { 
    font-size: 2.875em; 
    color: white; 
    text-align: center; 
    padding-top: 8%; 
    padding-left: 5%; 
} 

.frontend-background-image p:nth-child(2) { 
    color: white; 
    text-align: center; 
    padding-left: 5%; 
    font-size: 46px; 
} 

Answer 1

em 당신이 2.875em을 불안 할 때, 당신은 2.875 배 무엇이든을 의미 의미, 상대 단위 글꼴 크기는 처음부터 시작되었습니다. 기본 크기가 16px 인 경우 46px는 2.875em입니다. 다른 텍스트가 다른 크기로 표시된다는 사실은 기본 크기가 다른 것임을 의미합니다.

dev 도구에서 요소를 검사 할 때 '계산 된'탭에서 실제로 렌더링되는 글꼴 크기를 확인할 수 있습니다. 귀하의 경우, 그 라인은 약 40px에서 나오고 있습니다.

부모에 font-size를 설정하여 em이 상대적인 기준선을 변경할 수 있습니다. 귀하의 경우에는, 예를 들어, 당신이 추가하면 : 그것은 수학을 만들거야

.frontend-background-image { font-size: 16px; }

아웃과 동일하고, 텍스트와 같은 크기의이 라인을 모두 만들 것입니다.