폰트에 영향을 주는 속성으로 글꼴, 크기, 굵기, 기울임 등 다양한 스타일링이 가능합니다.
W3C CSS 문서 내 Fonts Module Level 3에서 좀더 자세한 속성들을 살펴볼 수 있습니다.
📌 font-family
font-family 속성은 텍스트의 폰트를 지정하는 속성으로, 속성 값은 복수로 지정할 수 있으며, 지정된 순서대로 표시할 수 있는 폰트를 찾게 됩니다. 웹 브라우저가 표시할 수 있는 폰트를 찾으면 이후에 지정된 속성 값들은 무시됩니다.
family-name은 OS에서 사용하는 폰트 이름으로, 폰트 파일 이름과는 다릅니다. 예를 들면 Windows의 기본 폰트 이름은 "맑은 고딕"이며, 파일 이름은 "malgun.ttf"입니다. generic-family는 범용 폰트 그룹으로 "serif"(세리프), "sans-serif"(산세리프), "cursive"(필기체), "fantasy"(판타지), "monospace"(고정폭)가 있습니다.
CSS는 사용자 OS에 설치된 폰트를 위의 다섯 가지 범용 폰트 패밀리로 구분하여 관리합니다. 다시 말해 "sans-serif"는 특정 폰트를 지정하는 것이 아니라 "Helvetica", "Geneva", "Verdana", "Arial", "Univers"와 같은 폰트를 그룹화하여 지정하는 것입니다.
body {
font-family: Times New Roman, Trebuchet MS, serif;
}
div {
font-family: "맑은 고딕", "돋움", sans-serif;
}
운영체제 별 지원 글꼴(CSS Font Stack)
웹폰트(@font-face) 규칙을 사용하여 사용자 정의 글꼴을 원격 서버 또는 로컬에서 로드할 수 있습니다.
다음은 프리텐다드 글꼴을 웹폰트로 사용하기 위한 선언입니다.
@font-face {
font-family: 'Pretendard';
src: url('<https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff>') format('woff');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'Pretendard';
}
MDN font-family 속성
MDN 웹폰트