텍스트 폰트 설정하는 속성들을 배우다.
<!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>Document</title>
<style>
/* Font 설정
1) font-family: 글꼴의 집합
- 순차적으로 우선순위를 가진다.
- 최대한 비슷해보이는 글꼴들로 구성한다.
- 사용자의 컴퓨터 환경에 영향을 받지 않는 방법: 웹 폰트
2) font-size: 텍스트의 크기
3) font-weight: 텍스트의 굵기
*/
p{
font-family: 'bitbit', "RIDIBatang", "NotoSansKR-Bold";
font-size: 20px;
/* size 기본값 16px */
font-weight: 100;
font-style: italic;
}
@font-face{
font-family:'bitbit';
src:url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff'),url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff2') ;
}
</style>
</head>
<body>
<p>비오는 거 좋아하시나요?</p>
</body>
</html>
<body>
<p>비오는 거 좋아하시나요?</p>
</body>
</html>
클라이언트의 컴퓨터 환경에 영향을 받지 않는 웹 폰트를 주로 사용한다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex08_display.html (0) | 2023.06.11 |
|---|---|
| [CSS] Ex07_크기단위.html (0) | 2023.06.11 |
| [CSS] Ex05_반응선택자.html (0) | 2023.06.11 |
| [CSS] Ex04_계층선택자 실습.html (0) | 2023.06.11 |
| [CSS] Ex03_선택자 실습2.html (0) | 2023.06.11 |
