CSS에서 사용할 글꼴을 정의한다.
전통적으로 웹브라우저는 운영체제 시스템의 글꼴을 기반으로 텍스트를 렌더링했지만 모던 웹사이트는 제작자가 직접 글꼴을 원하는 대로 지정할 수 있게 되었다. 이것을 '웹폰트'라 부르며 글꼴 리소스를 서버에 두어 필요한 경우 클라이언트에 임시 다운로드해서 웹브라우저가 사용한다. 이렇게 글꼴 제약에서 벗어나면서 콘텐츠는 타이포그래피를 적용받게 되었다.
@font-face 룰은 웹폰트 세트를 정의해서 CSS의 top-level에서 뿐 아니라, 다음과 같은 CSS conditional-group at-rule 안에서도 사용될 수 있다.
@media : CSS Conditionals Level 3 Module@supports : CSS Conditionals Level 3 Module@document : CSS Conditionals Level 4 Module@font-face { font-family: 〈family-name〉; src: [〈src〉]#; [font-weight: 〈font-weight〉;]? [font-style: 〈font-style〉;]? [unicode-range: 〈unicode-range〉;]? [font-feature-settings: 〈'font-feature-settings'〉;]? [font-variation-settings: 〈'font-variation-settings'〉;]? [font-named-instance: 〈font-named-instance〉;]? [font-display: 〈font-display〉;]? [font-language-override: 〈'font-language-override'〉;]? [ascent-override: 〈ascent-override〉;]? [descent-override: 〈descent-override〉;]? [line-gap-override: 〈line-gap-override〉;]?}font-family 속성에 사용될 글꼴 이름을 정의한다. @font-face 규칙이 유효하려면 반드시 설정해야 한다. 이름에 공백이 포함되어 있으면 따옴표로 감싸준다.
일반 구성이 아닌 글꼴명을 자료로 하는 타입이다. 따옴표로 인용되어야 한다.
글꼴 데이터를 포함하는 리소스를 지정한다. 원격 위치의 URL이거나 사용자 기기에 내장된 글꼴 이름으로서 필요하다면 쉼표로 구분하여 목록으로 작성한다. 작성 순서에 따라 우선 순위(실패시)를 가지며 글꼴을 로드한다. @font-face가 유효하려면 반드시 지정해야 한다. 원격 위치의 경우에는 url() 함수형 구문을, 로컬 위치의 경우에는 local() 함수형 구문을 사용한다. 일반적으로 local() 함수형 구문은 리소스 목록에서 맨 끝 쪽에 위치하여 우선 순위를 마지막으로 둔다.
〈url〉 [ format(〈font-format〉)]? [ tech( 〈font-tech〉#)]? | local(〈font-face-name〉)
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
local() 함수형 구문의 인수로서 더 큰 폰트 패밀리 내에서 단일 폰트를 고유하게 식별하는 문자열이다. 선택적으로 따옴표로 묶을 수 있다. 따옴표로 묶지 않으면 따옴표로 묶지 않은 폰트 패밀리 네임 처리 규칙이 적용되며 이름은 공백으로 구분된 시퀀스여야 한다. 식별자를 하나의 공백으로 구분, 결합하여 문자열로 변환한다.
format() 함수형 구문에 인수로 사용되는 값을 나타낸다.
| 문자열(인수) | 폰트 포맷 | 확장자 |
|---|---|---|
| "woff" | WOFF 1.0 (Web Open Font Format) | .woff |
| "woff2" | WOFF 2.0 (Web Open Font Format) | .woff2 |
| "truetype" | TrueType | .ttf |
| "opentype" | OpenType | .ttf, .otf |
| "embedded-opentype" | Embedded OpenType | .eot |
| "svg" | SVG Font | .svg, .svgz |
| "collection" | OpenType Collection | .otc, .ttc |
[〈string〉 | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]
EULA 계약을 위반하지 않고 웹 콘텐츠에서 사용할 수 있는 폰트 메커니즘이 필요하여 Microsoft가 글꼴 제작자와 협력하여 EOT 파일 형식을 개발하였다.
OpenType 글꼴 형식은 디지털 타이포그래피를 위한 다양한 기능을 갖춘 글꼴 데이터 대해 널리 지원되는 형식이다. 1990년대에 Microsoft와 Adobe가 공동 개발한 글꼴 기술이다.
SVG 글꼴은 SVG의 font 요소를 사용하여 정의된 글꼴이다. 기술적인 이유로 작은 글꼴 크기로 텍스트의 품질과 가독성에 제한이 있을 수 있다.
1980년대 말에 Microsoft와 Apple이 Adobe에 맞서기 위해서 개발된 글꼴 저장 기술이다. 주된 장점은 글꼴 개발자가 다양한 글꼴 크기에서 어떻게 표시될 것인지에 대한 높은 수준의 제어를 할 수 있는 힌팅(hinting) 기술을 가지고 있다.
TrueType, OpenType, Open Font Format(OFF) 글꼴에 사용되는 테이블 기반 sfnt 구조를 위한 컨테이너이다. 글꼴 데이터 테이블을 선택적으로 압축한 sfnt 글꼴의 리패키지 버전이다.
woff 보다 휠씬 뛰어난 압축률로 글꼴 데이터의 압축을 합리적으로 쉽게 구현할 수 있도록 설계되었으며, @font-face 규칙과 함께 사용하기에 적합하다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
[〈font-feature-tech〉 | 〈color-font-tech〉 | variations | palettes | incremental ]
[color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]
[feature-opentype | feature-aat | feature-graphite]
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
url( 〈string〉 〈url-modifier〉* ) | src( 〈string〉 〈url-modifier〉* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
CSS에서 사용할 외부 리소스를 가져온다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
font-style 속성을 참고해 주기 바란다.
auto | normal | italic | oblique [ 〈angle〉{1,2} ]?
글꼴 선택의 경우 적절한 초기값이 선택된 것처럼 글꼴이 선택된다. 변형 축 클램핑(clamping)의 경우 클램핑(clamping)이 발생하지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
normal | italic | oblique
normal | italic | oblique 〈angle〉?
oblique를 지정시 각도를 직접 지정할 수 있다. -90deg보다 작은 값이나 90deg보다 큰 값은 유효하지 않다. 각도가 지정되지 않으면 14deg로 처리한다.
현재 파이어폭스는 지원하지만 다른 웹브라우저는 확인이 필요하다.
기울임꼴로 지정된 글꼴을 사용한다. 만약에 사용할 수 없다면 비스듬한 글꼴(oblique)을 사용한다. 둘 다 사용할 수 없다면 인위적으로 시물레이션이 된다.
기울임꼴이나 비스듬한 형태가 아닌 일반 형태를 나타낸다.
비스듬한 면으로 지정된 글꼴을 선택한다. 면이 비스듬한 글꼴을 사용할 수 없다면 기울임꼴(italic)로 분류된 면이 대신 사용된다. 둘 다 사용할 수 없다면 인위적으로 시물레이션 된다.
현재 파이어폭스 이외의 웹브라우저는 확인이 필요하다.
0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
font-weight 속성을 참고해 주기 바란다.
auto | 〈font-weight-absolute〉{1,2}
글꼴 선택의 경우 적절한 초기값이 선택된 것처럼 글꼴이 선택된다. 변형 축 클램핑(clamping)의 경우 클램핑(clamping)이 발생하지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
[normal | bold | 〈number [1,1000]〉]
얇은 두께로 처리한다.
매우 가볍게 처리한다.
가벼운 두께로 지정한다.
일반 굵기로 지정한다.
중간 굵기로 지정한다.
'700'의 반 굵기로 지정한다.
굵게 지정한다.
매우 굵게 지정한다.
매우 무겁게 지정한다.
'700' 값과 동일하다.
'400' 값과 동일하다.
font-stretch 속성을 참고해 주기 바란다.
auto | 〈'font-stretch'〉{1,2}
글꼴 선택의 경우 적절한 초기값이 선택된 것처럼 글꼴이 선택된다. 변형 축 클램핑(clamping)의 경우 클램핑(clamping)이 발생하지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
일반보다 압축된 글꼴을 지정한다.
일반 글꼴보다 확장한다.
일반보다 더 압축된 글꼴을 지정한다.
일반 글꼴보다 더 확장한다.
일반 글꼴을 지정한다.
condensed 값의 반 정도의 압축을 한다.
expanded 값보다 반 정도 확장한다.
일반보다 더 초압축된 글꼴을 지정한다.
일반 글꼴보다 더 최대 확장한다.
선언된 서체가 지원할 수 있는 유니코드 코드포인트 집합을 정의한다. 디스크립터의 값은 쉼표로 구분된 유니코드 범위(<urange>) 값이다. 이러한 범위의 조합은 지정된 텍스트 실행을 위해 글꼴 리소스를 다운로드할지 여부를 결정할 때 유저 에이전트에게 힌트 역할을 한다.
각 <range> 값은 U+ 또는 u+ 접두사 뒤에 아래 나열된 세 가지 형식 중 하나의 코드포인트 범위로 구성된 UNICODE-RANGE 토큰이다. 이러한 형식 중 하나에 맞지 않는 범위는 유효하지 않으며 선언이 무시된다.
U+416)U+400-4ff)U+4??)? 문자가 모든 16진수에 걸쳐 있는 코드포인트 범위를 정의한다.형식별 각각 16진수에는 최대 6자리까지 허용된다.(?를 16진수로 처리하는 경우)
〈urange〉#아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
u '+' 〈ident-token〉 '?'* | u 〈dimension-token〉 '?'* | u 〈number-token〉 '?'* | u 〈number-token〉 〈dimension-token〉 | u 〈number-token〉 〈number-token〉 | u '+' '?'+
<number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.
normal | 〈feature-tag-value〉#
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
〈string〉 [ 〈integer〉 | on | off ]?
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
OpenType 또는 TrueType 글꼴 변형에 대한 낮은 수준의 제어를 설정하기 위한 값을 나타낸다.
normal | [ 〈string〉 〈number〉]#
글리프(glyph)) 모양, 일치 또는 위치가 변경되지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
font-named-instance 디스크립터가 auto 이외의 값으로 설정된 경우 Font Feature and Variation Resolution의 해당 단계에서 글꼴 파일을 검사하여 Localized name matching의 주어진 규칙에 따라 주어진 <string>과 동일한 지역화된 이름을 가진 글꼴에서 첫 번째 명명된 인스턴스를 찾는다.
auto | 〈string〉아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
CSS 속성에 따라 정해진 값으로 처리한다. 속성에 따라 auto가 갖는 값의 의미는 다르므로 반드시 해당 속성에서의 값이 의미하는 내용을 확인해야 한다.
폰트 페이스(font face)의 다운로드 및 사용 준비 여부와 시기에 따라 폰트 페이스가 표시되는 방식을 결정한다.
auto | block | swap | fallback | optional
유저 에이전트가 정의한다.
폰트 페이스(font face)에 짧은 블록 주기(대부분의 경우 3초)와 무한 스왑 주기를 부여한다.
폰트 페이스(font face)에 매우 짧은 블록 주기(대부분의 경우 100ms 이하)와 짧은 스왑 주기(대부분의 경우 3초)를 부여한다.
폰트 페이스(font face)에 매우 짧은 블록 주기를 부여하고 스왑 주기를 부여하지 않는다.
폰트 페이스(font face)에 매우 짧은 블록 주기(대부분의 경우 100ms 이하)와 무한 스왑 주기를 부여한다.
@font-face 규칙에 정의된 글꼴이 렌더링될 때 적용되는 초기 설정을 정의한다. 글꼴 선택에는 영향을 주지 않는다.
normal | 〈string〉OpenType 글꼴로 렌더링할 때 요소의 콘텐츠 언어를 사용하여 OpenType 언어 시스템을 유추하도록 지정한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
글꼴의 ascent metric을 정의한다.
normal | 〈percentage〉해당 매트릭 값을 글꼴 파일에서 직접 가져온다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
어떠한 기준으로 부터 백분율로 표현한다.
글꼴의 descent metric을 정의한다.
normal | 〈percentage〉해당 매트릭 값을 글꼴 파일에서 직접 가져온다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
어떠한 기준으로 부터 백분율로 표현한다.
글꼴의 line gap metric을 정의한다.
normal | 〈percentage〉해당 매트릭 값을 글꼴 파일에서 직접 가져온다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
어떠한 기준으로 부터 백분율로 표현한다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Fonts Module Level 4 | 초안 작업 | Last review date: 2022-6-18 |
@font-face로 글꼴을 정의할 때 다음 아래의 디스크립터들을 사용할 수 있다.
@font-face {
font-family: NanumGothic;
font-style: italic;
font-weight: bold;
src: local('NanumGothic'),
url('/webfonts/NanumGothic.eot'), /* IE 6~8 */
url('/webfonts/NanumGothic.woff') format('woff'),
url('/webfonts/NanumGothic.otf') format(‘opentype’),
url('/webfonts/NanumGothic.ttf') format('truetype');
}글꼴로 사용할 이름을 정의한다. 만일 지정할 이름에 공백이 포함되는 경우에는 지정할 이름을 따옴표로 감싼다.
글꼴의 모양을 정의한다. 설정 가능한 값의 종류는 font-style 속성을 참조하길 바란다.
글꼴의 굵기를 지정한다. 설정 가능한 값의 종류는 font-weight 속성을 참고하길 바란다.
사용할 글꼴 파일의 경로를 설정한다. 콤마(,)로 구분하여 글꼴 파일 경로를 리스트로 설정할 수 있으며 먼저 정의되어 있는 글꼴을 우선으로 해서 반영한다. local() 함수는 사용자의 기기의 운영 체제에 있는 시스템 글꼴을 사용하도록 한다. 시스템 글꼴이 아닌 경우에 사용할 수 있는 글꼴의 종류는 대표적으로 'woff','otf' 가 있다. 이 글꼴 파일들을 서버 계정 내에 올려 url() 함수를 이용해서 경로를 설정한다. 이렇게 설정된 글꼴을 사용해서 콘텐츠를 작성하는 경우 사용자의 웹브라우저는 서버로 부터 글꼴을 내려받아 사용한다. 따라서 사용자의 기기에 직접 글꼴을 가지고 있지 않아도 어느 기기이든 일관성이 있는 글꼴로 콘텐츠를 출력할 수 있다.
확장자가 '*.woff', '*.otf'같은 글꼴들을 웹폰트라 부른다. 보통 글꼴 파일은 파일 크기가 크다보니 서버에서 사용자의 기기로 내려받는 시간이 필요하다. 사실 시스템 폰트로 사용되고 있는 대표적인 트루타입 폰트인 '*.ttf'도 웹폰트로 사용할 수 있다. 그러나 파일 크기가 크다보니 웹폰트로 사용하기에는 적절치 않다. 따라서 네트워크에 최적화된 글꼴이 필요하게 되었는데 이러한 이유로 웹폰트라는 특화된 글꼴이 개발되었다.