[Css] 웹 폰트 속성 - 사용 방식, 종류

웹 글꼴(web font)란?

• CSS3에서는 웹 글꼴을 사용하여 사용자의 컴퓨터에 설치되어 있지 않은 글꼴까지 사용할 수 있다.
• 우선 웹 폰트를 서버에 올려놓고 CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가하고 font-family 속성으로 폰트를 선택하여 사용할 수 있다.

@font-face {
    font-family: myGothicFont;
    src: url(/examples/media/NanumGothic.woff);
    font-weight: bold;
    font-stretch: 150%;      
    font-style: oblique 40deg;
    unicode-range: 
}
@font-face {
    font-family: myMyeongjoFont;
    src: url(/examples/media/NanumMyeongjo.woff);
    font-stretch: expanded;
   unicode-range: U+0025-00FF;            /* codepoint range */
}
#nGothic { font-family: myGothicFont; }
#nMyeongjo { font-family: myMyeongjoFont; }

 

웹 글꼴 사용방식

CDN(Content Delivery Network) 링크 방식

• Google Font에서 사용하고자 하는 웹폰트를 선택하고, 아래 구문을 CSS 파일에 추가하면 된다.

/* @import rule의 url 함수는 서버에서 혹은 지정된 url에서 파일을 찾아 다운로드한다 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* { font-family: 'Nanum Gothic', sans-serif; }

서버 폰트 로딩 방식

• 폰트 파일을 서버에 두고 요청이 오면 클라이언트로 전송하는 방식으로, 브라우저에 따라 지원하는 폰트 파일 형식이 다르다는 문제가 있다.
• 영문과 한글을 혼용하는 경우 먼저 영문 폰트, 그 다음 한글 폰트를 지정하여야 하며, 한글 폰트부터 지정하면 영문에도 한글 폰트가 지정된다.

@font-face {
  font-family:"Nanum Gothic";
  src:url("NanumGothic.eot");      /* IE 9 호환성 보기 모드 대응 */
  src:local("☺"),                  /* local font 사용 방지 (생략 가능) */
   url("NanumGothic.eot?#iefix") format('embedded-opentype'), /* IE */
   url("NanumGothic.woff") format('woff'); /* 표준 브라우저 */
}

* { font-family: "Nanum Gothic", sans-serif; }

 

웹 글꼴 종류

트루 타입 글꼴(TrueType Fonts, TTF)

• 트루 타입 글꼴은 Apple과 Microsoft가 공동으로 개발한 외곽선 글꼴 표준으로, 이 글꼴은 맥(MAC)과 윈도우(Window) 운영체제에서 가장 오랫동안 사용되어 온 대표적인 글꼴이다.

오픈 타입 글꼴(OpenType Fonts, OTF)

• 오픈 타입 글꼴은 사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준으로, 이 글꼴은 트루 타입 글꼴의 뒤를 잇기 위해 Microsoft에서 개발하였으며 현재는 거의 모든 컴퓨터에서 사용되고 있다.
• 오픈 타입 글꼴은 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있다는 장점을 가지고 있다.

웹 오픈 글꼴(The Web Open Font Format, WOFF)

• 웹 오픈 글꼴은 웹 페이지에서 사용할 수 있는 글꼴 표준이며, 현재 W3C에서 사용을 권장하고 있는 글꼴 표준이고, 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴이다.

웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)

• 이 글꼴은 웹 오픈 글꼴 1.0 버전보다 더 나은 압축률을 제공하는 트루 타입 또는 오픈 타입 글꼴이다.

SVG 글꼴(SVG Fonts/Shapes)

• SVG 글꼴은 SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 표준으로, SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용할 수 있게 해준다.

임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT)

• 임베디드 오픈 타입 글꼴은 Microsoft가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴이다.

 

웹 글꼴 속성

font-family 속성

• font-family 속성은 하나 또는 여러 개의 글꼴을 설정할 수 있는데, 웹 브라우저가 위에서부터 순서대로 글꼴을 읽다가 글꼴이 존재하면 해당 글꼴로 표시하고 없으면 다음을 읽는다.
• 글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 하며, 여러 개의 글꼴을 나열할 때에는 쉼표 ,로 구분 짓는다.
• generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
• font family : 특정 글꼴 집합 ("Times", "Courier" 등)

.serif { font-family: "Times New Roman", Times, serif; }
.sansserif { font-family: Arial, Helvetica, sans-serif; }

font-style 속성

• font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며 normal(스타일 적용 안함), italic(이탤릭체), oblique(기울기로 italic같지만 지원하는 웹브라우저 거의 업음)의 속성값을 가진다.

.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }

font-weight 속성

• font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정하며, lighter 같은 단어나 900 등과 같은 숫자로 두께를 설정한다.

.normal { font-weight: normal; }
.bold { font-weight: 600; }
.bolder { font-weight: bolder; }

font-size 속성

1. 절대적 크기 : 명시된 텍스트 크기 그대로 사용하는데, 스크린 기준의 픽셀 단위(px)가 절대적 크기다.
2. 상대적 크기 : HTML 요소들의 크기에 따라 텍스트 크기가 변한다. 상대적 크기에는 본 크기를 1em으로 놓고 그에 대한 상대적인 크기를 설정하는 배수 단위(em)와 백분율 단위(%)가 있다.

body { font-size: 100%; }
#large { font-size: 2.5em; }
#small { font-size: small }
#fixed { font-size: 20px; }

font-variant 속성

• font-variant 속성은 영문자에만 적용되는 속성으로, 속성값이 small-caps이면 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킨다.
• 작은 대문자 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미하며, 대문자는 기존 크기 그대로 출력한다.

.normal { font-variant: normal; }
.smallCaps { font-variant: small-caps; }

font 속성 축약 표현

font : font-size(필요) & font-family(필요) & font-style | font-variant | font-weight | line-height

/* size | family */
font: 2em "Open Sans", serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/1.2 monospace;

/* style | variant | weight | size/line-height | family */
/* font-variant: small-caps; 소문자를 대문자로 만든다. 단 크기는 일반 대문자에 비해 더 작다.*/
font: italic small-caps bolder 16px/3 cursive;

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/