1. 개요
- text의 글꼴, 굵기, 크기, 스타일 등을 지정
| 속성 | 의미 |
| font-family | 글꼴 지정 |
| font-size | 글자 크기 지정 (px, cm, % 등) |
| font-style | 글자 스타일 지정 |
| font-variant | 소문자를 작은 대문자로 변경 |
| font-weight | 글자 굵기 지정 |
| font | font에 관련된 속성을 한번에 지정할 수 있는 단축형 속성 |
2. font-family
- font명에 white-space가 있으면, " "로 감싼다.
<head>
<style>
@font-face {
font-family: 'SuncheonB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.test{
font-family: 'SuncheonB';
}
</style>
</head>
<body>
<div class="test">
text
</div>
</body>
*추천 사이트
1. 눈누 : 상업용 폰트 제공
눈누
상업용 무료한글폰트 사이트
noonnu.cc
3. font-style
- 속성 값
- normal = 기본
- italic = 이탤릭체로
- oblique = 기울임꼴로
4. font-variant
- 속성 값
- normal = 초기값
- small-caps = 소문자를 작은 대문자로 변환
5. font
- 속성 값 "font-style font-variant font-weight font-size/line-height font-family"순으로 작성
- 생략 시 기본값이 적용
<head>
<style>
@font-face {
font-family: 'SuncheonB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.test{
font : normal normal bold 20px/30px 'SuncheonB';
}
</style>
</head>
<body>
<div class="test">text</div>
</body>
'Programming > CSS' 카테고리의 다른 글
| 5. UI(User Inteface) 속성 (0) | 2022.03.12 |
|---|---|
| 4. Text 속성 (0) | 2022.03.12 |
| 2. 선택자 (0) | 2022.03.12 |
| 1. CSS 개요 (0) | 2022.03.11 |
| CSS 기초 (0) | 2021.02.08 |