Em로 글꼴 크기 설정 Set Font Size With Em

사용자가 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신에 엠을 사용합니다.

em 크기 단위는 W3C에서 권장합니다.

1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16 픽셀입니다. 따라서 1em의 기본 크기는 16px입니다.

크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels / 16 = em

h1 {

    font-size: 2.5em; /* 40px/16=2.5em */

}

h2 {

    font-size: 1.875em; /* 30px/16=1.875em */

}

p {

    font-size: 0.875em; /* 14px/16=0.875em */

}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

    font-size: 2.5em; /* 40px/16=2.5em */

}

h2 {

    font-size: 1.875em; /* 30px/16=1.875em */

 }

p {

    font-size: 0.875em; /* 14px/16=0.875em */

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>

<p>Specifying the font-size in em allows all major browsers to resize the text.

Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>

</html>