폰트 관련 속성

font-family

여러개의 폰트를 나열해서 사용자의 컴퓨터에 있는 폰트를 사용한다.

font-family:'Times New Roman', Times, serif;

❗️Times New Roman 같이 띄어쓰기가 필요한 폰트는 따옴표로 감싸준다.

---

line-height

✔️ 폰트마다 높이가 각각 다르기 때문에 line-height을 설정해서 높이를 일정하게 유지할 수 있다.

---

font와 단축속성

다음 두가지의 방법은 똑같이 적용된다.

font-size: 20px;
font-family: 'Times New Roman', Times, serif;

font: 20px 'Times New Roman', Times, serif;

font-style과 font-weight은 앞쪽에 넣고, line height은 font-size뒤에 /하고 넣는다.

font: italic bold(혹은 100 20px/1.7(line height) 'Time New Roman', Times, serif;}

❗️단, 이중 하나를 뺴먹게되면 font값은 initial로 돌아간다.

---

letter-spacing, word-spacing

✔️기본값= 0 = 최적의 가독성을 제공하는 상태

.text {
	letter-spacing: 5px;
}

=> 글자간에 5px씩 간격이 생긴다.

---

text-indent

들여쓰기 기능

.paragraphc1 {
	text-indent: 20px;
}

=> paragraph1 class의 문단 첫 줄이 20px만큼 들여쓰게 된다.

여기에 부모 class인 container에 다른 값을 넣으면

.container {
	text-indent: 50%;
}

=> paragraph1을 제외한 다른 문단들이 화면 전체 가로길이의 50%만큼 들여쓰게된다.

---

text-decoration

underline: underline
line-through: line-through
overline: overline

---

word-break

<p>의 width값을 지정했는데도 그 값을 뚫고 계속 이어질 때가 있다 -> 언어에 따라 다른데, 영어는 뚫고 나간다.
그럴 때 width에 맞게 문장을 자를 수 있다.

[html]

<p lang="en">
	aaaaaaaaaaaaaaaaa
</p>
<p lang="ko">
	가나다라마바사아자차카타파하
</p>

[css]

p {
	width: 120px;
}
p[lang="en"] {
	word-break: break-all;
}
p[lang="ko"] {
	word-break: keep-all;
}

=> 영어는 잘리게되고, 한국어는 Keep-all을 썼기 때문에 이어지게 된다.

---

text-transform

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;

=> 맨 앞 글자를 대문자로, 모두 대문자로, 모두 소문자로 변경한다.