728x90
반응형
font-family
- font-family property로 원하는 글꼴을 선택할 수 있다.
- 기본적으로는 해당 컴퓨터에 설치되지 않은 글꼴은 사용할 수 없다.
- 글꼴이 존재하지 않는 경우를 대비해 여러가지 예비용 글꼴들을 설정해둘 수 있다.
- 접속한 사용자에게 글꼴을 설치하게 하는 것보다는 CDN이라는 개념을 많이 사용한다.
- CDN: Content Delivery Network, 다른 회사에서 인터넷에 올려놓고 배포하는 이미지, 글꼴 등의 리소스들을 의미한다.
font-family: 'Gamja Flower', cursive;
팬그램
- A부터 Z(ㄱ ~ ㅎ)를 모두 사용하여 만든 문구를 팬그램이라고 하며, 주로 글꼴을 확인하는 용도로 사용한다.
- 한국어 : 다람쥐 헌 쳇바퀴에 타고파
- 영어 : The Quick Brown Fox Jumps Over The Lazy Dog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_글꼴.html</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Gaegu:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
</style>
<link rel="stylesheet" href="./assets/css10.css">
</head>
<body>
<h3># font-family</h3>
<ul id="list1">
<li>font-family property로 원하는 글꼴을 선택할 수 있다.</li>
<li>기본적으로는 해당 컴퓨터에 설치되지 않은 글꼴은 사용할 수 없다.</li>
<li>글꼴이 존재하지 않는 경우를 대비해 여러가지 예비용 글꼴들을 설정해둘 수 있다.</li>
<li>접속한 사용자에게 글꼴을 설치하게 하는 것보다는 CDN이라는 개념을 많이 사용한다.</li>
<li>CDN: Content Delivery Network,
다른 회사에서 인터넷에 올려놓고 배포하는 이미지, 글꼴 등의 리소스들을 의미한다.
</li>
</ul>
<h3># 팬그램</h3>
<p>
A부터 Z(ㄱ ~ ㅎ)를 모두 사용하여 만든 문구를 팬그램이라고 하며,
주로 글꼴을 확인하는 용도로 사용한다.
</p>
<div id="font1">다람쥐 헌 쳇바퀴에 타고파</div>
<div id="font2">The Quick Brown Fox Jumps Over The Lazy Dog</div>
<div id="font3">The Quick Brown Fox Jumps Over The Lazy Dog</div>
</body>
</html>html {
font-size: 25px;
}
/* 글꼴이 적용 안될 때를 대비해 font-family 여러개를 설정해둘 수 있다. */
#list1 {
font-family: 'Gamja Flower', cursive;
}
#font1 {
font-family: 'Gaegu', cursive;
}
#font2 {
font-family: 'Bebas Neue', sans-serif;
}
#font3 {
font-family: 'Kanit', sans-serif;
}728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 가상 클래스 (0) | 2023.06.07 |
|---|---|
| [CSS] 아이콘(Icon) (0) | 2023.06.07 |
| [CSS] 그림자(shadow) (0) | 2023.06.07 |
| [CSS] 텍스트(text) (0) | 2023.06.04 |
| [CSS] 단위(px, mm, cm, in) (0) | 2023.06.04 |
