Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS를 사용하여 Em으로 글꼴 크기 설정하기

<시간/>

확장 가능한 텍스트 크기의 경우 글꼴 크기는 em으로 표시됩니다. 기본적으로 하나의 em은 16px 또는 12pt와 같습니다. 그 값은 상위 요소의 글꼴 크기에 상대적입니다.

구문

CSS font-size 속성의 구문은 다음과 같습니다 -

Selector {
   font-size: /*value*/
}

예시

다음 예는 CSS font-size 속성을 ems −

에서 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   border: 2px solid yellow;
   padding: 20px;
   font-size: 1em;
}
span {
   font-size: 2em;
   background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html>

출력

이것은 다음 출력을 제공합니다 -

CSS를 사용하여 Em으로 글꼴 크기 설정하기

예시

<!DOCTYPE html>
<html>
<head>
<style>
table {
   width: 40%;
   border: 2px ridge red;
   font-size: 0.8em;
}
span {
   font-size: 1.5em;
   background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html>

출력

이것은 다음 출력을 제공합니다 -

CSS를 사용하여 Em으로 글꼴 크기 설정하기