font-face, line-height, letter-spacing

1. font-face

https://fonts.google.com/

Browse Fonts - Google Fonts

에서 web폰트 다운로드

 

적용 디렉토리 예시

📁 /public/fonts/NotoSansKR/

  ├─ 1️⃣ NotoSansKR-Regular.woff2
  └─ 🆑 NotoSansKR-Regular.woff

 

css

@font-face {
  font-family: 'NotoSansKR';
  src: url('/fonts/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'),
       url('/fonts/NotoSansKR/NotoSansKR-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'NotoSansKR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

 

`font-family`에 여러 개를 나열하면 브라우저는 왼쪽부터 순서대로 폰트를 적용해요. 가장 먼저 사용 가능한 폰트를 적용하고, 다음 폰트들은 "대체용(fallback)"으로 사용됩니다.

 

 

폰트 계열(Generic font family)

 

• `sans-serif`, `serif`, `monospace` 등은 폰트 계열(Generic font family)입니다.
• 브라우저는 이 키워드를 보고 각 시스템에 내장된 기본 폰트를 자동으로 사용합니다.

 

계열	설명	예시
`sans-serif`	획이 없는 깔끔한 글꼴	맑은 고딕, Arial, Helvetica
`serif`	획이 있는 전통적인 글꼴	Times New Roman, Georgia
`monospace`	고정폭 글꼴	Courier New, Consolas

 

 

2. letter-spacing

letter-spacing 속성값

 

normal 기본값으로 문자에 공백이 들어가지 않음. 0px과 같음

길이값   px,  em, % 등으로 지정 (음수값 가능)

 

3. line-height

line-height는 줄 높이를 정하는 속성입니다.

• 기본값 : normal
• 상속 : Yes
• 애니메이션 : Yes

line-height: normal | length | number | percentage | initial | inherit

• normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.
• length : 길이로 줄 높이를 정합니다.
• number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. 
• percentage : 글자 크기의 몇 %로 줄 높이로 정합니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

 예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 됩니다. 줄 높이는 60px인데 글자 크기는 40px이므로, 글자 위와 아래에 각각 10px의 여백이 생깁니다. 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹치게 됩니다.

 

 

 

 

---

https://creamilk88.tistory.com/197

https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

https://www.codingfactory.net/10639