|
<!DOCTYPE html>
<html lang="ko">
<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>CSS 10</title>
<style type="text/css">
/* @import 문을 사용하여 웹에서 글꼴을 불러와 사용할 수 있다.*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');
/*font-family - 글꼴을 지정할 수 있는 속성*/
/*font-family:"글꼴1", "글꼴2", "글꼴3", 글꼴유형*/
/*속성값으로 복수개의 글꼴을 작성하고 마지막에 글꼴 유형을 작성한다.*/
/*앞에 작성한 글꼴부터 적용가능 여부를 검사하고 모두 사용이 불가능할 경우 마지막 글꼴유형을 사용한다.*/
/*글꼴 유형 속성값*/
/*serif - 삐침이 있는 명조 계열의 글꼴*/
/*sans-serif - 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴*/
/*monospace - 텍스트 폭과 간격이 일정한 글꼴*/
/*fantasy - 화려한 글꼴*/
/*cursive - 손으로 쓴 것 같은 필기체 계열의 글꼴*/
.poppins{
font-family:"Poppins", sans-serif;
}
.varela{
font-family:"Varela Round", sans-serif;
}
</style>
</head>
<body>
<p>기본글꼴<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>가나다라마바사아자차카타파하</p>
<p class="poppins">poppins글꼴<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>가나다라마바사아자차카타파하</p>
<p class="varela">varela글꼴<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>가나다라마바사아자차카타파하</p>
</body>
</html>
|
기본글꼴 poppins글꼴 varela글꼴 |
CSS font-family
2023. 4. 6. 12:43