HTML, CSS, JavaScript

[CSS] CSS - 글꼴 설정하기

BGK97 2025. 1. 16. 17:18 
font-size: value1 | value2 | value3

글자 관련 스타일

1. font-family

  • 글꼴을 지정하는 속성으로, 텍스트를 사용하는 요소(<body>, <p>, <h> 태그 등)에 자주 사용
  • <body> 태그에서 정의하면, 문서 전체에 적용되며 자식 요소에 대해 같은 글꼴 사용 가능

*** 기본형 기호 

  •  W3C 표준 규약에서 사용하므로 알아두면 나중에 읽기 쉬움!!

1. ' | ' 는 나열 옵션중 하나가 값이 되어야 한다는 뜻

font-size: value1 | value2 | value3
  • value1 ~ 3 중 하나가 속성값이 됨

2. 속성값을 나열할 때 키워드는 그대로 나열

font-variant: normal | small-caps
  • font-variant의 기본 속성인 normal, small-caps 명시

3. 속성값을 나열할 때 값이 아니라 유형이라면, < >로 묶으며 다른 속성을 유형처럼 사용할 수 있음

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
font: <font-style><font-variant><font-weight>
  • 여기서 백분율은 값이 아니라 유형이며, font-size: 30%와 같이 사용이 가능

2. font-size

  • 글자의 크기를 지정하는 속성
  • 단위는 px 또는 pt나 백분율로 사용 가능
//기본형
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
  • 절대 크기 - 브라우저에서 지정한 글자 크기
  • 상대 크기 - 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기 지정
  • 크기 - 브라우저 상관 없이 글자 크기 직접 지정
  • 백분율 - 부모 요소의 글자 크기를 기준으로 백분율로 표시

키워드를 사용하여 글자 크기 지정 (크기 작은 순)

xx-small < x-samll < small < medium < large < x-large < xx-large

단위를 사용하여 글자 크기 지정하는 방식

종류 설명
em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율 값 지정
rem 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 비율 값 지정
ex 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 비율 값 지정
px 모니터의 1픽셀을 기준(1px)으로 비율 값 지정
pt 포인트라고 하여 일반 문서에서 많이 사용(12pt ...)

백분율을 사용하여 글자 크기 지정하는 방식

  • 부모 요소의 글자크기를 기준으로 하므로, 적용할 때 부모요소는 반드시 단위로 표현이 되어있어야함
body { //부모
	font-size: 16px
}

p { //자식
	font-size: 30%
}

3. font-style

  • 이탤릭체로 표시할때 사용(기울어진 글씨)
  • oblique와 italic이 있음
font-style: normal | italic | oblique
italic과 oblique는 기울어진 것은 같으나, 웹에서는 주로 italic을 사용한다. 그 이유는,
oblique는 원래 글꼴을 기울여 표시하고,
italic체는 원래부터 기울어진 글꼴이 처음부터 디자인 되어있어 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문

4. font-weight

  • 글자의 굵기를 지정하는 속성
  • 예약어 ( normal, bold, bolder 등) 또는 숫자를 사용해 굵기 지정 가능
  • 100 ~ 900 사이에서 표현이 되며 숫자가 높아질수록 굵어진다.

웹 폰트 사용하기

웹 폰트란 ?

  • 사용자 시스템에 설치된 글꼴을 사용해 화면에 표시되는 폰트
  • CSS3가 웹 폰트를 표준으로 채택하면서, 포토샵에서 원하는 글꼴을 이미지로 저장하지 않아도 됨

웹 폰트 업로드 방법

  • TTF 폰트를 변환하여 사용했었으나, 파일의 크기가 커 웹에서 사용하기에는 적절하지 않음
  • EOT, WOFF, WOFF2 파일을 주로 사용
  • 외부에서 가져온 폰트파일은, @font-face 속성을 사용해 웹 폰트 정의
@font-face{
	font-family: <글꼴 이름>;
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>...];
}
  • font-family에서 정한 이름은 나중에 폰트를 선언할 때에 사용
  • src 속성에는 글꼴 파일의 경로 지정
<style>
	@font-face {
    	font-family: 'Ostrich';
        src: local('Ostrich Sans'),
        	 url('해당 폰트의 주소...') format('woff, svg, truetype...');
    }
</style>
  • local() 함수를 통해 기존에 글꼴이 존재하는지 확인 가능
  • url에 폰트의 위치(주소)를, format에 형식을 적어주면 됨
저작자표시 비영리 동일조건