1. 폰트 종류
1)Serif폰트
Times New Roman
궁서체
2) Sans-Serif폰트
Arial
굴림체
3) Monospace폰트 : 프로그래밍 폰트로 많이 쓰임.
Courier
Courier New
4) Cursive
Comic Sans MS
Monotype Corsiva
5) Fantasy
Impact
Haettenschweiler
2. 폰트 설정 방법
1) 폰트가 내 컴퓨터에 이미 설치되어 있는 경우
예를 들어 내 컴퓨터에 Times New Roman이 있을 경우 html에는 따로 써줄 것이 없다.
CSS에 font-family를 적어주면된다.
font-family에 내가 적용하고 싶은 폰트를 1차로 적는다.
없을 경우 제 2의 폰트인 Times를 사용하도록 적는다.
Times사용도 실패하면 serif 폰트를 사용하도록 적는다.
HTML코드
fonts_in_my_coumputer라는 id에 원하는 내용을 적어준다.
<body>
<div id="fonts_in_my_counmputer">내 컴퓨터에 이미 폰트가 있다.</div>
</body>CSS코드
fonts_in_my_coumputer라는 id에 font-family를 적어준다. 1차는 Times New Roman, 2차는 Times, 3차는 serif다.
Times New Roman은 폰트 이름 자체에 공백이 있기 때문에 따음표 안에 넣어준다.
#fonts_in_my_computer {font-family: 'Times New Roman', Times, serif;
}
2) 온라인에 있는 폰트를 사용하는 경우
Google 폰트 사용하기
1) 구글 폰트 사이트에 접속 - 아래 사이트는 한글 폰트가 없다.
2) 원하는 폰트의 플러스 버튼 누르기
3) 링크 태그를 복사한다.
4) HTML head 태그에 링크를 복사해준다.
5) CSS 코드도 붙여넣어준다.
3) 온라인에 있는 한글 폰트 사용하려면?
https://fonts.google.com/earlyaccess
https://fonts.google.com/?subset=korean
1) Ctrl+F 를 누른뒤 Korean을 검색한다.
(위 사이트는 Korean을 검색해야하고, 아래 사이트는 그냥 한글 폰트가 바로 나온다.)
2) 원하는 폰트의 링크를 HTML head태그에 복사해준다.
<head>
<link href="https://fonts.googleapis.com/earlyaccess/jejugothic.css" rel="stylesheet">]
</head>
<body>
<div id="google">구글이 잘 나오나요?</div>
</body>3) CSS코드에 font-family를 적어준다.
#google {font-family: 'Jeju Gothic', sans-serif;
}
※주의 사항 : 폰트 저작권
구글 폰트 사이트에서 폰트를 클릭한 후 우측 하단에 라이센스 정보를 확인한다.
Open Font Licence의 경우 상업적인 사용도 가능하다.
4) 웹에 있는 무료 폰트를 다운받은 뒤 사용하고 싶을 때
1) 무료 폰트를 검색해서 다운로드 받는다.
(Window의 경우 TTF, MAC의 경우 OTF)
2) 작업하는 폴더에 'fonts'라는 폴더를 만들고 다운로드한 폰트 파일을 넣는다.
3) HTML, CSS코드를 작성한다.
HTML에 jua_font라는 id가 있다.
따로 적어줄 내용은 없다.
<body>
<div id="jua_font">주아 폰트 잘 나오나요?</div>
</body>
CSS코드
@font-face를 작성하고 그 안에 소스코드를 나타내는 src를 적고 url를 적어준다.
url은 현재 css파일이 있는 폴더에서 fonts폴더가 있는 곳으로 가기 위한 경로를 적어주어야 한다.
현재의 경우
'연습' 폴더 아래 'css'폴더와 'fonts'폴더가 있다.
style.css파일은 css폴더 안에 있다.
그렇다면 css의 상위 폴더인 '연습' 폴더로 가주면 되니까 ../를 한 번만 써주면 된다.
그리고 fonts폴더로 가서 원하는 폰트명을 써준다.
font-family에 현재 폰트의 이름을 정해준다. 내 맘대로 정하면 된다.
그리고 id jua_font CSS코드를 적어준다.
@font-face{
src: url("../fonts/BMJUA_ttf.ttf");
font-family: "Jua";
}
#jua_font{
font-family: "Jua";
}
※@font-face에 관련된 내용을 자세히 확인하고 싶다면 아래 싸이트를 방문해보자!
https://developer.mozilla.org/ko/docs/Web/CSS/@font-face
@font-face
CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에
developer.mozilla.org
※P,S,
내 컴퓨터에 저장된 폰트를 불러오는 방식인데 다른 사람이 내 웹사이트를 봐도 같은 폰트가 나올까?
이미지 파일을 올렸을 때 상대방이 이미지를 가지고 있지 않아도 웹 상에 보인다.
이처럼 폰트 파일도 서버에 같이 올리고 주소 설정을 잘해주면 이미지 처럼 폰트도 다른 사람들에게 잘 나타난다!
'프로그래밍 > HTML_CSS' 카테고리의 다른 글
| HTML 자주 쓰는 태그(Tag) 정리하기 (0) | 2020.09.22 |
|---|---|
| CSS 적용 순서 (0) | 2020.07.16 |
| CSS Box Model - margin과 padding 완벽 이해 (0) | 2020.07.09 |
| HTML div와 span (0) | 2020.07.08 |
| CSS Text Styling : font-size, font-weight, text-align, text-decoration(폰트 사이즈, 굵기, 정렬 등) (0) | 2020.07.07 |
