font-family
텍스트의 글꼴을 정의할 때 사용하는 속성이다. 로컬에 있는 폰트를 사용할 수도 있으며 웹 폰트(웹에서 지원하는 폰트)를 사용하는 경우도 많다.
// 로컬 폰트 사용할 경우
p {
font-family: Arial, Helvetica, san-serif;
}
// 웹 폰트 사용할 경우
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<style>
p {
font-family: Arial, Helvetica, san-serif;
}
</style>
<p>하이</p>
</body>위와 같은 구조로 사용하며 폰트명을 여러개 사용하는 이유는 가장 첫번째의 폰트가 지원되지 않을 경우 순차적으로 오른쪽에 있는 폰트를 사용하기 때문이다.
다음은 텍스트 속성에 대해 알아보자
- font-size: 글자 크기 지정
- font-weight: 글자 두께 지정
- line-height: 행 높이 지정
- text-align: 텍스트 정렬 방식 지정
- text-decoration: 텍스트 줄 긋기
hyohyo