폰트 종류와 웹 폰트 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • 폰트 종류와 웹 폰트
    learn
    Practice
    learn
    12 글자(Text) 관련 스타일
    폰트 종류와 웹 폰트

    웹에서 텍스트를 다루는 프로퍼티는 자주 사용하며 그만큼 중요합니다. 텍스트와 관련된 프로퍼티 중 가장 먼저 폰트(Font)와 관련된 프로퍼티를 배워봅시다.
    폰트와 관련된 프로퍼티는 크게 폰트 크기(font-size)폰트 종류(font-family)폰트 형태(font-stylefont-weight)가 있습니다.


    font-family


    font-family를 통해 원하는 폰트의 종류를 지정할 수 있습니다.

    일반적으로 한 단어로 구성된 폰트명은 따옴표 없이 사용할 수 있습니다. 하지만 띄어쓰기 또는 하이픈(-)이 들어간 폰트명의 경우 따옴표를 사용하여 하나의 폰트명임을 명시해야 합니다.

    하지만 font-family를 통해 폰트의 종류를 정의할 때는 여러 개를 동시에 지정하는 경우가 많습니다. 모든 이용자의 기기에 동일한 폰트가 없을 수도 있기 때문에 폰트를 여러 개를 지정하여 앞 순서에 위치한 폰트부터 차례로 적용합니다. 첫 번째 폰트가 없으면 두 번째 폰트를 적용하는 방식인 것이죠.

    때문에 항상 마지막 폰트는 모든 OS 및 브라우저에 기본으로 설치된 일반 글꼴을 두어 실행하는데 문제가 발생하지 않도록 해야 합니다. 가장 보편적으로 사용하는 일반 글꼴은 Sans-serifSerif, Cursive, Fantasy, Monospace 등입니다.

    그렇다면 내 컴퓨터에서 사용하는 기본 폰트만 적용할 수 있을까요? 그렇지 않습니다. 폰트 파일을 함께 업로드한 뒤, 업로드한 경로를 통해 원하는 폰트를 사용할 수 있습니다. 혹은 웹 폰트(Web Font)라는 것을 이용하여 폰트를 적용할 수 있죠.


    웹 폰트(Web Font)


    폰트를 로컬, 즉 내 컴퓨터의 저장소가 아닌 다른 곳에서 손 쉽게 가져올 수 있는 웹 폰트를 사용해봅시다. 웹 폰트(Web Font)는 링크를 통해 폰트를 불러오는 방식을 뜻합니다. 먼저 구글 폰트에서 원하는 폰트를 찾아서 적용시켜 보겠습니다.

    원하는 폰트를 찾았다면 + 버튼을 클릭합니다. 본 강의에서는 확실한 차이를 보여드리기 위해 Nanum Pen Script 폰트를 사용하였습니다. 하단에서 추가된 폰트를 확인할 수 있습니다. 검은 하단 바를 클릭한 뒤 빨간 화살표를 눌러 웹 폰트를 가져올 수 있도록 합니다.

    여기서 STANDARD와 @IMPORT 두 가지 방식으로 폰트를 불러올 수 있습니다.

    STANDARD는 HTML에 CSS 파일을 연결할 때와 동일하게 <link> 태그를 이용하여 폰트를 가져옵니다.

    반면 @import를 클릭하면 import 방식으로 폰트를 가져올 수 있습니다. 이는 CSS 파일에 <style> 태그를 제거하고 @import를 바로 작성하거나, HTML 파일에 <style> 태그를 이용하여 추가할 수 있습니다.

    사용법 또한 간단합니다. 아래의 Specify in CSS에 나와 있는 정해진 이름과 프리셋을 사용하면 됩니다.

    직접 원하는 폰트를 찾아 아래와 같이 @import를 이용해 봅시다. 아래와 같은 CSS 코드를 추가하여 폰트가 바뀌는 것을 확인합니다. 

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)