[CSS기초] 폰트 속성

1. 폰트 변경하기

.text{
  font-size: 12px;
  font-style: italic;
  font-family:sans-serif;
}

font-family로 변경 가능하다.
( font-style 은 이탤릭체로 설정해둔 css)

font-family: 'Segoe UI', Tahoma, Geneva, Verdana;

사용자의 컴퓨터에 어떤 폰트들이 있는지 모르기 때문에 적용이 안될 수 있다. 그래서 여러 개를 두는 것도 가능하다.

첫 번째로 있는 Segoe UI가 없다면 자동으로 Tahoma 폰트로 넘어가게 될 것이다.

🤷‍♀️ 있는 폰트만 활용 해야할까?

쿠팡 로그인 페이지를 html과 css대로 짜는 과제에서는 noto sans라는 font를 이용하던데..!

구글 웹폰트

Noto Sans Korean에서 Default 타입이 되는 400과 bold 타입 700 Light 타입 300을 선택해주면(선택은 자유) 아래 링크 태그가 들어오게 된다.

왼쪽은 .html , 오른쪽은 .css 파일이다.
열어보면 적용 완료 !

2. 텍스트 정렬

#center{
  text-align: center;
}

나는 center라는 class를 이용했다

👼 선생님 왜 저는 정렬이 안되나요.

단 ! text-align은 인라인 요소는 적용이 되지 않기 때문에 <span> 에 적용하면 적용이 되지 않는다는 부분 !

그럼 <span>은 아예 정렬이 불가능한 부분인가요?
span을 감싸고 있는 블록 요소를 이용하여 정렬해주면 되겠다 !

3. 텍스트 너비 조절

 letter-spacing: -0.2px;
 word-spacing: 0.5px;

위는 letter-spacing을 10px로 조절한 것이고, 아래는 word-spacing 10px로 조정한 것이다.

Reference | 웹 사이트에 Noto Sans KR폰트 적용하기