티스토리 뷰

[개발]프로그래밍/css3

[css3] font-family - 텍스트 글꼴 지정

좋은 블로그 2021. 3. 19. 10:18
1. 개념
font-family - 텍스트에 글꼴 지정
font-family는 웹 페이지에서 텍스트 글꼴을 원하는 글꼴로 나오도록 함
글꼴을 지정하는 방법은 3가지
① 시스템에 설치되어 있는 기본 글꼴을 사용
② @font-face를 이용하여 웹폰트를 import 한 후에 사용
③ 직접 다운을 받거나 작업한 폰트를 @font-face로 설정한 후에 사용
2. 태그
font-family
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
1
body
{
font-family : "나눔명조","궁서","바탕" ;
font-weight : bold ;
}
2
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap') ;
.notoSansKR
{
margin-top : 10px ;
font-family : 'Noto Sans KR' ;
}
3
@font-face
{
font-family : customFont ;
src:url("Chango-Regular.ttf");
}
.keyStyleFont
{
margin-top : 10px ;
font-family : customFont ;
}
</style>
</head>
<body>
1번 적용
<div>
body에 해당하는 나눔명조를 적용
</div>
2번 적용
<div class = "notoSansKR" >
Noto Sans KR을 적용
</div>
3번 적용
<div class = "keyStyleFont" >
직접 로컬에 있는 파일을 불러와서 Chango 글꼴 적용
</div>
</body>
</html>
결과 화면
코드 설명
1
body { ........}
첫번째 div에는 아무런 클래스 파일이 선언되지 않았습니다.
그리고 body 안에 있는 속성으로써 body에 적용되는 글자 스타일을 적용받게 됩니다.
여기서는 컴퓨터에 설치되어 있는 글꼴을 기준으로 쓰라고 선언을 하였습니다.
폰트를 하나만 선언하지 않는 것은 폰트가 없을 때 두번째 , 세번째 폰트를 사용하라고 지정하기 위해서입니다.
2
notoSans { ........}
두번째는 notoSans라는 클래스를 적용하였습니다.
여기서는 Noto Sans KR 폰트를 사용하겠다고 했는데 제 PC에는 이 폰트가 설치되어 있지 않습니다.
그래서 이 폰트를 import 받아서 사용할 수 있도록 하였습니다.
이 사이트에 가보시면 구글에서 제공하는 웹 폰트들이 있는데 여기서 link로 할 것인지 @import로 할 것인지 나와 있습니다.
그것을 복사하여 import를 하고 CSS rules to specify families 라고 해서 font-family도 나와 있어서 그것을 이용하면 쉽게 적용하실 수 있습니다.
3
keyStyleFont { ........}
만약 어디에도 없는 자신만의 폰트가 있으시면 직접 사용하시면 됩니다.
font-face에서 font-family로 자신이 사용할 글꼴명을 설정해주고 url를 통해 자신이 사용할 글꼴을 지정해 줍니다.
그리고 나머지는 동일하게 font-family로 선언한 글꼴명을 가져와서 선언해 주면 위와 같이 적용이 가능합니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] font-weight - 글자 굵기 지정  (0) 2021.03.23
[css3] font-size - 글자 크기 조절  (0) 2021.03.22
[css3] prefixfree.min.js - 브라우저 접두사 편하게 사용  (0) 2021.03.18
[css3] !important - 높은 우선 순위 스타일 적용  (0) 2021.03.17
[css3] ID 선택자 - 한번만 스타일 적용  (0) 2021.03.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday