글꼴 스타일(CSS)

곽성욱·2022년 6월 20일
0

CSS

목록 보기
4/5

✍🏻 글꼴과 관련된 스타일을 지정하는 속성 정리

텍스트 스타일은 글자의 모양을 지정하는 글꼴 스타일과 텍스트를 지정하는 문단 스타일이 있다.
📄 글꼴과 관련된 스타일을 지정하는 속성들을 정리한 글

📖 글꼴과 관련된 속성

글꼴과 관련된 스타일을 지정하는 속성들은 font로 시작되는 속성이다.
글자 크기, 굵기, 글꼴 등을 지정할 수 있다.

📌 글꼴 지정 : font-family

웹문서에서 사용할 글꼴을 지정할 때 사용하는 속성이다.
이 속성을 사용할 때 사용자 시스템에 글꼴이 설치 되어있지 않았을 때 의도하지 않은 글꼴이 표시되기 때문에 두 번째, 세 번째 글꼴까지 생각하여 지정해야 한다.

body {
	font-family: "맑은 고딕", 돋움, 굴림;
}

글꼴을 지정할 때 두 단어 이상으로 된 이름은 큰따옴표("")를 사용하여 작성한다.

📌 글자 크기 지정 : font-size

글자 크기를 지정할 때 사용하는 속성이다.
단위는 px(절대 크기), em(상대 크기), %(백분율) 등으로 지정할 수 있다.

body {
	font-size: 16px;
} 
  • 절대 크기 : 브라우저에서 지정한 글자 크기
  • 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기
  • 백분율 크기 : 부모 요소의 글자 크기를 기준으로 계산(부모 요소 크기가 절대 크기로 지정되어 있어야 한다.)

📌 글자 굵기 지정 : font-weight

글자 굵기를 지정할 때 사용하는 속성으로 웹 문서를 작성할 때 자주 사용한다.
굵기는 예약어(normal, bold, bolder, lighter)나 100~900 사이의 숫자로 지정할 수 있다.

body {
	font-weight: bold;
}
.container {
	font-weight: 200;
}

📌 이탤릭체로 표시 : font-style

글자를 이탤릭체로 표시할 때 사용하는 속성이다.
속성값은 italic, oblique(단순 기울기)가 있는데 주로 italic을 사용한다.

body {
	font-style: italic;
}

📖 웹 폰트 사용하기

font-family 속성을 사용하여 글꼴을 지정할 때 사용자 시스템에 글꼴이 없을 경우를 대비하여 2~3개의 글꼴을 지정했다.
하지만 웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있다.

📌 웹 폰트

CSS3가 표준으로 채택한 것으로 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 저장한다.
따라서 사용자가 사이트에 접속하면 웹 폰트가 사용자 시스템에 다운로드 된다.

📌 업로드하고 사용하기

자신이 가지고 있는 폰트를 사용할 수도 있고, 구글 폰트를 사용하여 글꼴을 지정할 수 있다.

  • 자신이 가지고 있는 폰트 사용하기
@font-face {
	font-family: '글꼴 이름 지정'; /* 이 글꼴을 사용할 때 작성할 이름 */
    src: local('글꼴 이름'), /* 사용자 시스템에 글꼴이 있는지 확인 */
    	 url('글꼴 파일 경로') format('글꼴 파일 포맷'),
    	 url('글꼴 파일 경로') format('글꼴 파일 포맷'),
/* 파일 포맷은 woff, truetype(ttf), svg 등이 있다.*/
  • 구글 폰트 사용하기
  1. [fonts.google.com] 에 접속 -> [Language] 목록에서 [Korean]을 선택(한글 글꼴만 보기)
  2. 원하는 글꼴 선택 -> [select this style] 클릭
  3. 상단 아이콘 클릭 -> [@import] 클릭 -> 하단의 코드 각각 복사 -> 웹 문서에 붙여넣기
/* 주로 css파일 최상단에 작성 */
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Gentium+Plus:ital@1&display=swap');
body {
	font-family: 'Gamja Flower', cursive;
}
profile
개발일지 작성 블로그

0개의 댓글