스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법

 

환경: Eclipse Mars

 

CSS 에서 font-family 속성으로 텍스트의 글꼴을 원하는 대로 변경할 수 있습니다. 속성명에서 font 뒤에 family 는 여러 폰트를 동시에 적용할 수 있다는 의미입니다. 여러 폰트들 중에서 우선 순위는 폰트 나열 순서입니다. 다음 규칙은 사용자의 컴퓨터에 설치되어 있는 폰트부터 적용됩니다. 

 

선택자를 지정하고 내부 속성에 font-family 을 이용하면 텍스트의 font 를 변경할 수 있습니다. 그리고 폰트는 쉼표를 구분자로 해서 계속 추가가 가능합니다. 나열한 순서대로 폰트가 적용되며, 사용자 컴퓨터에 없다면 다음 폰트가 적용됩니다. HTML 태그 <font> 의 face 속성과 같습니다.  

 

<style type="text/css">

선택자 {

font-family: 폰트1, 폰트2, 폰트3...;

}

</style>

 

 샘플을 보면 이해가 더 쉬울 겁니다. 아래 샘플 소스에서 두 개의 ID 에 여러 폰트들을 포함시켰습니다. #fontfamily1 의 나눔고딕이 현재 컴퓨터에 설치가 되어 있어서 적용이 되었습니다. 만약 없다면 바로 뒤에 있는 폰트로 넘어가겠죠. 이렇게 다양한 사용자들을 위해 차선책으로 적용이 가능한 폰트를 군집으로 만들어 넣는 것이 좋습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>color</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#fontfamily1 {
		font-family: 나눔고딕, NanumGothic, Georgia, Serif;
	} 
	#fontfamily2 {
		font-family: 돋움, 고딕, 나눔고딕 ;
	}
</style>
</head>
<body>
	<p id="fontfamily1">CSS font-family 적용 시키기 </p>
	<p id="fontfamily2">CSS font-family 적용 시키기 </p>
</body>
</html>

 

스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법

Posted by 녹두장군