[CSS] 폰트 관련 속성

by 호쌤(이광호) on March 11, 2022

CSS 역시 HTML과 마찬가지로 문장과 문단 관련 속성으로 구분됩니다. 먼저 살펴볼 속성은 문장을 구성하는데 사용되는 속성입니다.

#01. 글자 모양 관련 속성

글자의 모양은 문단, 문장 요소를 구분하지 않고 모든 HTML 요소에 적용 가능하다.

속성	설명
font-family	글꼴의 이름을 쉼표로 구분하여 나열. 글꼴 이름에 공백이나 “-“가 포함된 경우 글꼴 이름을 따옴표로 감싸야 한다. 개발자 PC가 아닌 접속자 PC를 기준으로 하는 글꼴이 명시되어야 한다. 접속자에게 글꼴이 설치되지 않은 경우 정상적으로 표시되지 않는다. ex) font-family: NanumGothic, Gulim, 궁서체
font-size	글자크기 (px단위를 주로 사용함)
font-style	글자의 기울임 여부 –> italic, normal(기본값)
font-weight	글자의 굵게 표현 여부 border, bold, normal, light, lighter 100~900사이의 100단위 숫자값을 사용하기도 한다.(400이 normal에 해당)
color	글자 색상
line-height	한 줄의 높이 (px, %단위 표현) –> %단위인 경우 font-size를 기준으로 함
font	일괄표현 –> [style] [weight] size[/line-height] family

em 단위

부모 요소에게 부여된 글자 크기를 1em으로 놓고 이에 대한 상대적인 크기를 지정하는 방식.

아래 코드에서 .child의 부모가 100px의 글자크기를 갖고 있기 때문에 .child에게 1em은 100px이 된다. 그러므로 0.5em은 50px이 된다.

<style>
    .parent {
        font-size: 100px;
    }

    .child {
        font-size: 0.5em;
    }
</style>

<div class='parent'>
    <div class='child'>Hello World</div>
</div>

#02. 웹 폰트

CSS에서 font-family 속성으로 지정한 글꼴이 접속자의 PC에 설치되어 있지 않을 경우 고르게 표시되지 않는 문제를 해결하기 위해 폰트파일을 온라인에 올려두고 접속자의 PC에 설치되어 있지 않은 경우 웹 상의 글꼴을 내려받아 사용할 수 있게 하는 기법

직접 웹 폰트를 만들 수도 있지만 최근에는 google에서 제공하는 웹 폰트를 활용하는 추세

1) 구글 웹 폰트 (https://fonts.google.com)

• 구글에서 운영하는 무료 웹 폰트 사이트.
• 이곳에서 참조할 CSS 구문을 얻을 수 있다.

2) 아이콘 폰트 (font awesome)

• 특수문자에 반응하여 글꼴파일에 저장되어 있는 기호가 표시되게 하는 특수 폰트
• font awesome이 가장 널리 알려져 있다.
  • version 4까지는 무료
  • version 5,6은 부분 유료화 됨

3) Font Awesome 6

부분 유료화 된 버전.

사이트에 이메일 주소를 기입하여 이메일을 통해 승인을 받고 사용하는 것이 일반적이지만 무료 아이콘들을 CDN 방식으로 참조하는 형태도 가능하다.

CDN 방식 사용하기

파일을 직접 다운로드 받기 번거로운 경우 온라인에 공개되어 있는 CSS를 직접 참조하여 사용할 수 있다.

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css' />

아이콘 목록 확인

아이콘 목록은 https://fontawesome.com/v6/icons/?o=r&m=free에서 확인할 수 있다.