반응형
|
스타일 시트 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' 카테고리의 다른 글
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
|---|---|
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
| 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 (1) | 2018.01.31 |
| 스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기 (0) | 2018.01.23 |
| 스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법 (0) | 2018.01.13 |
