Text & Font & Units (feat. 구글 폰트)

개발하는지호 2023. 11. 26. 22:45

1. Text, 텍스트 크기

텍스트의 크기는 font-size 옵션으로 변경 가능

2. Font( or Font-family), 폰트 스타일

일반적으로 텍스트의 폰트 스타일은 현재 사용 중인 브라우저에서 제공하는 기본 폰트(Browser default)로 적용됨

브라우저 내 설정에서 현재 적용 중인 폰트 확인 가능

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

여기에서 폰트의 링크를 <head> 안에 넣은 뒤 스타일 적용에서

font-family : '원하는 폰트명', serif; 입력하면 변경 완료

*serif : 대체 폰트이다.

3. Units, 텍스트 단위

CSS에는 px뿐만 아니라 %,em,rem 등 다양한 단위가 있으며, 사용 상황에 따라 적용하는 단위가 달라진다.

em 은 부모의 px 크기에 비례하여 계산이 된다

*px는 절대적인 수치이다.