CSS3 글꼴
CSS3에서는 웹 글꼴을 위해 다음 규칙이 추가되었습니다.
- @font-face 규칙
CSS에서 사용할 수 있는 font 속성은 다음과 같습니다.
- font-family
- font-style
- font-variant
- font-weight
- font-size
CSS3 웹 글꼴(web font) 지원 버전
CSS3 웹 글꼴(web font)을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
웹 글꼴의 형식
웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같습니다.
- 트루 타입 글꼴(TrueType Fonts, TTF)
- 맥(MAC)과 윈도우(Window) OS에서 사용되어 온 대표적인 글꼴입니다.
- 오픈 타입 글꼴(OpenType Fonts, OTF)
- 사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준입니다.
- 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있는 장점을 가지고 있습니다.
- 웹 오픈 글꼴(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 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용할 수 있게 해줍니다.
- 임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT)
- MS가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴입니다.
웹 글꼴(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>
웹 글꼴의 두꺼운 글씨체(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>
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과 매우 유사하지만 지원하는 웹 브라우저가 거의 없습니다.
font-variant 속성
font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다.
이때 영문자 중 대문자는 기존 크기 그대로 출력합니다.
작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미합니다.
※ font-variant 속성은 한글에는 적용되지 않으며, 영문자에만 적용됩니다.
font-weight 속성
font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정합니다.
사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다.
또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다.
font-size 속성
font-size 속성은 텍스트의 크기를 설정합니다.
웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소입니다.
하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 됩니다.
이때에는 제목을 위한 HTML 요소인 <h1>태그부터 <h6>태그를 사용해야 합니다.
font-size 속성값
font-size 속성값은 다음과 같이 두 가지 방식으로 표현할 수 있습니다.
- 절대적 크기
- 상대적 크기
절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.
상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식입니다.
또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있습니다.
font-size의 크기 단위
font-size 속성값에 자주 사용되는 대표적인 크기 단위는 다음과 같습니다.
백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.
배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다.
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다.
[출처] TCPSCHOOL.com
'IT > Web' 카테고리의 다른 글
| CSS3 사용자 인터페이스 - resize, outline-offset, box-sizing (0) | 2020.04.14 |
|---|---|
| CSS3 버튼 (0) | 2020.04.13 |
| 티스토리에 코드펜 CodePen 소스 코드 올리는 방법 (6) | 2020.04.09 |
| CSS3 텍스트 (0) | 2020.04.09 |
| CSS3 테두리 (0) | 2020.04.03 |
댓글