CSS3 글꼴

---

[CSS] CSS3 글꼴

CSS3에서는 웹 글꼴을 위해 다음 규칙이 추가되었습니다.

- @font-face 규칙

 

CSS에서 사용할 수 있는 font 속성은 다음과 같습니다.

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size

---

CSS3 웹 글꼴(web font) 지원 버전

CSS3 웹 글꼴(web font)을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

CSS3 웹 글꼴(web font) 지원 버전

 

웹 글꼴의 형식

웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같습니다.

1.  트루 타입 글꼴(TrueType Fonts, TTF)
   • 맥(MAC)과 윈도우(Window) OS에서 사용되어 온 대표적인 글꼴입니다. 
2.  오픈 타입 글꼴(OpenType Fonts, OTF)
   • 사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준입니다.
   • 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있는 장점을 가지고 있습니다.
3.  웹 오픈 글꼴(The Web Open Font Format, WOFF)
   
   • 웹 페이지에서 사용할 수 있는 글꼴 표준이며, 현재 W3C에서 사용을 권장하고 있는 글꼴 표준입니다. 
   • 이 글꼴은 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴입니다.
4.  웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)
   • 웹 오픈 글꼴 1.0 버전보다 더 나은 압축률을 제공하는 트루 타입 또는 오픈 타입 글꼴입니다.
5.  SVG 글꼴(SVG Fonts/Shapes)
   • SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 입니다.
   • SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용할 수 있게 해줍니다.
6.  임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT)
   
   • MS가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴입니다. 

 

웹 글꼴(web font)별 지원 버전

웹 글꼴 별로 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

웹 글꼴(web font)별 지원 버전

 

@font-face 규칙

@font-face 규칙은 웹 폰트(web font)를 정의할 때 사용하는 규칙입니다.

웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있게 해줍니다.

우선 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가합니다.

그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시하게 됩니다.

 

CSS3에서 @font-face 규칙을 사용하려면, 우선 font-family 속성을 이용하여 새로운 웹 글꼴을 위한 이름을 정의해야 합니다.

그 후에 해당 웹 글꼴이 사용할 글꼴 파일의 주소를 지정해 주면 됩니다.

<style>

    @font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); }

    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }

    #nGothic { font-family: myGothicFont; }

    #nMyeongjo { font-family: myMyeongjoFont; }

</style>

@font-face 규칙

 

웹 글꼴의 두꺼운 글씨체(bold text)를 위한 @font-face 규칙도 다음과 같이 추가로 설정할 수 있습니다.

<style>

    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }

    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjoBold.woff); font-weight: bold; }

    #nMyeongjo { font-family: myMyeongjoFont; }

</style>

 

웹 글꼴의 두꺼운 글씨체(bold text)를 위한 @font-face 규칙도 다음과 같이 추가

 

---

CSS 글꼴 집합(font-family)

CSS에는 두 가지의 글꼴 집합(font family)이 존재합니다.

• generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
• font family : 특정 글꼴 집합 ("Times", "Courier" 등)

 

font-family 속성

font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다.

font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들입니다.

만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됩니다.

이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 됩니다.

 

글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 합니다.

또한, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓습니다.

<style>

    .serif { font-family: "Times New Roman", Times, serif; }

    .sansserif { font-family: Arial, Helvetica, sans-serif; }

</style>

 

font-style 속성

font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 3가지의 속성값을 가집니다.

• normal : 텍스트에 어떠한 스타일도 적용하지 않습니다.
• italic : 텍스트를 이탤릭체로 나타냅니다.
• oblique : 텍스트를 기울입니다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없습니다.

See the Pen WNQQQVg by yunjunshin (@yjshin) on CodePen.

 

font-variant 속성

font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다.

이때 영문자 중 대문자는 기존 크기 그대로 출력합니다.

작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미합니다.

See the Pen RwWWrwZ by yunjunshin (@yjshin) on CodePen.

※ font-variant 속성은 한글에는 적용되지 않으며, 영문자에만 적용됩니다.

 

font-weight 속성

font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정합니다.

사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다.

또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다.

See the Pen XWmmXJW by yunjunshin (@yjshin) on CodePen.

 

font-size 속성

font-size 속성은 텍스트의 크기를 설정합니다.

웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소입니다. 

하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 됩니다.

이때에는 제목을 위한 HTML 요소인 <h1>태그부터 <h6>태그를 사용해야 합니다.

font-size 속성값

font-size 속성값은 다음과 같이 두 가지 방식으로 표현할 수 있습니다.

1.  절대적 크기
2.  상대적 크기

절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.

절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.

상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식입니다.

또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있습니다.

font-size의 크기 단위

font-size 속성값에 자주 사용되는 대표적인 크기 단위는 다음과 같습니다.

백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.

배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다.

픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다.

See the Pen yLYYeyr by yunjunshin (@yjshin) on CodePen.

---

[출처] TCPSCHOOL.com