- Adobe Fonts 사용 안내서
- 소개
- 글꼴 라이선싱
- 글꼴 다운로드 및 사용하기
- 웹 디자인 및 개발
- 웹 사이트에 글꼴 추가
- 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
- 글꼴 문제 해결
- HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
- AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
- CSS 선택기
- 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
- 임베드 코드
- 동적 하위 집합 및 웹 글꼴 제공
- 글꼴 이벤트
- 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
- 사이트가 use.typekit.net에 연결되지 않습니다.
- CodePen에서 웹 글꼴 사용하기
- 브라우저 및 OS 지원
- 도메인
- 로컬에서 개발 시 웹 글꼴 사용하기
- 콘텐츠 보안 정책
- 웹 글꼴 인쇄하기
- 언어 지원 및 OpenType 기능
- 글꼴 기술
이 페이지에서는 각각의 구체적인 예와 함께 개별 OpenType 기능에 대해 자세히 다룹니다. 웹 프로젝트에서 OpenType 기능을 활성화하고 CSS에서 사용하는 방법에 대한 광범위한 개요는 다음 AEM 프로젝트 CSS에서 OpenType 기능 사용에 대한 도움말 문서를 참조하십시오.
합자
글자
숫자
스타일 세트
동아시아 스크립트
폭 변형
- 비례 폭 (pwid)
- 비례 대체 폭 (palt)
- 비례 가나 (pkna)
- 전체 폭 (fwid)
- 절반 폭 (hwid)
- 대체 절반 폭 (halt)
- 1/3 폭 (twid)
- 1/4 폭 (qwid)
문화적 변형
- JIS78 양식 (jp78)
- JIS83 양식 (jp83)
- JIS90 양식 (jp90)
- JIS2004 양식 (jp04)
- 번체 양식 (trad)
- 루비 표기법 양식 (ruby)
- 가로 가나 대체 (hkna)
- NLC 한자 양식 (nlck)
- 대체 주석 양식 (nalt)
- 이탤릭체 (ital)
세로 기능
기타
일반/표준 합자 (liga)
작동 중인 합자의 예, Warnock Pro에 설정됨.
이 기능은 글리프 시퀀스를 합자라고 하는 단일 글리프로 대체합니다. 합자는 인쇄 용도로 선호됩니다. 이 기능을 활성화하면 디자이너/제조업체가 정상적인 조건에서 사용해야 한다고 판단하는 합자를 삽입합니다.
합자 기능은 기본적으로 활성화되어 있으므로 CSS를 작성하지 않아도 작동해야 하지만 Chrome에서는 기본적으로 활성화되어 있지 않습니다. 또한 Safari(Mac 또는 iOS)에서는 비활성화할 수 없습니다. 그리고 일부 버전의 Chrome 및 Firefox는 공백이 포함된 합자에서 문제가 발생합니다.
.class {
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";
}
font-variant 속성 또는 font-variant-ligatures 하위 속성으로 활성화하려면 일반 합자와 상황별 합자를 모두 활성화하는 common-ligatures 값 사용하십시오. 상황별 대체처럼, 상황별 합자에는 특정 상황에서만 대체 글리프를 적용하는 기본 제공 조건부 논리가 있습니다. font-feature-settings로 동일한 효과를 얻으려면 "liga" 및 "clig" 기능 태그를 모두 사용하십시오. 참조 항목: 여러 OpenType 기능을 사용하기 위한 구문.
.class {
font-variant-ligatures: no-common-ligatures;
-moz-font-feature-settings: "liga" 0, "clig" 0;
-webkit-font-feature-settings: "liga" 0, "clig" 0;
font-feature-settings: "liga" 0, "clig" 0;
}
이 기능을 비활성화하려면 no-common-ligatures 값과 0의 숫자 인덱스를 font-feature-settings에 사용하십시오.
상황별 대체 (calt)
작동 중인 상황별 대체의 예, Caflisch Script Pro에 설정됨.
이 기능은 지정된 상황에서 더 나은 결합 비헤이비어를 제공하는 대체 양식으로 기본 글리프를 대체합니다. 합자(엄밀히 말하면 합자 기능은 아니지만)와 마찬가지로 상황별 대체는 글리프의 모양을 주변 컨텍스트와 조화시키는 데 일반적으로 사용됩니다.
상황별 대체 기능은 기본적으로 활성화되어 있으므로 CSS를 작성하지 않아도 작동해야 하지만 Chrome에서는 기본적으로 활성화되어 있지 않습니다. 또한 Safari(Mac 또는 iOS)에서는 비활성화할 수 없습니다.
.class {
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
font-variant 속성 또는 font-variant-ligatures 하위 속성으로 활성화하려면 contextual 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "calt" 기능 태그를 사용하십시오.
.class {
font-variant-ligatures: no-contextual;
-moz-font-feature-settings: "calt" 0;
-webkit-font-feature-settings: "calt" 0;
font-feature-settings: "calt" 0;
}
이 기능을 비활성화하려면 no-contextual 값과 0의 숫자 인덱스를 font-feature-settings에 사용하십시오.
임의 합자 (dlig)
작동 중인 임의 합자의 예, Warnock Pro에 설정됨.
이 기능은 글리프 시퀀스를 일 글리프(합자)로 대체합니다. 합자는 인쇄 용도로 선호됩니다. 활성화되면 이 기능은 특수 효과에 사용할 수 있는 합자를 삽입합니다.
.class {
font-variant-ligatures: discretionary-ligatures;
-moz-font-feature-settings: "dlig";
-webkit-font-feature-settings: "dlig";
font-feature-settings: "dlig";
}
임의 합자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-ligatures 하위 속성으로 활성화하려면 discretionary-ligatures 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "dlig" 기능 태그를 사용하십시오.
작은 대문자 (smcp)
작동 중인 작은 대문자의 예, Warnock Pro에 설정됨.
이 기능은 소문자를 작은 대문자로 바꿉니다.
.class {
font-variant-caps: small-caps;
-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";
}
작은 대문자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-caps 하위 속성으로 활성화하려면 small-caps 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "smcp" 기능 태그를 사용하십시오.
일부 글꼴에서는 작은 대문자 기능에 다른 형식도 포함될 수 있습니다. OpenType 사양에 따라 smcp OpenType 기능은 "올드스타일 숫자와 같은 작은 대문자와 관련된 양식을 포함할 수 있습니다."
대문자에서 작은 대문자로 (c2sc)
작동 중인 대문자에서 작은 대문자로 기능의 예, Warnock Pro에 설정됨.
이 기능은 대문자를 작은 대문자로 바꿉니다.
.class {
font-variant-caps: all-small-caps;
-moz-font-feature-settings: "c2sc", "smcp";
-webkit-font-feature-settings: "c2sc", "smcp";
font-feature-settings: "c2sc", "smcp";
}
대문자에서 작은 대문자로 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-caps 하위 속성으로 활성화하려면 대문자와 소문자를 모두 작은 대문자로 바꾸는 all-small-caps 값을 사용하십시오. 사용자가 대문자에만 작은 대문자를 적용하려고 하는 경우는 거의 없기 때문에 이 비헤이비어가 유용합니다. font-feature-settings로 동일한 효과를 얻으려면 "c2sc" 및 "smcp" 기능 태그를 모두 사용하십시오. 참조 항목: 여러 OpenType 기능을 사용하기 위한 구문.
스와시 (swsh)
작동 중인 스와시의 예, Bickham Script Pro 3에 설정됨
이 기능은 기본 문자 글리프를 해당하는 스와시 글리프로 대체합니다.
.class {
-moz-font-feature-settings: "swsh";
-webkit-font-feature-settings: "swsh";
font-feature-settings: "swsh";
}
스와시 기능은 기본적으로 비활성화되어 있습니다.
font-feature-settings로 활성화하려면 "swsh" 기능 태그를 사용하십시오. 주어진 문자에 대해 둘 이상의 스와시 대체가 있을 수 있습니다. 대체 스와시에 액세스하려면 값에 숫자 인덱스를 추가하십시오.
.class {
-moz-font-feature-settings: "swsh" 2;
-webkit-font-feature-settings: "swsh" 2;
font-feature-settings: "swsh" 2;
}
이렇게 하면 글꼴에 두 번째 사용 가능한 스와시가 있는 경우 활성화됩니다. 짐작 하셨겠지만 첫 번째 코드 샘플에서처럼 "swsh" 값을 사용하는 것은 "swsh" 1 값을 사용하는 것과 같습니다.
지금은 "이름이 지정된" 값(예: 스와시(flowing))이 아직 주요 브라우저에서 지원되지 않는 font-feature-value CSS 정의에 의해 숫자 스와시 인덱스로 매핑되므로 font-variant 속성은 건너뜁니다.
스타일 대체 (salt)
작동 중인 스타일 대체의 예, Bree에 설정
이 기능은 기본 문자 글리프를 해당하는 스타일 대체로 대체합니다. 참조 항목: 스타일 세트 (ss ##).
.class {
-moz-font-feature-settings: "salt";
-webkit-font-feature-settings: "salt";
font-feature-settings: "salt";
}
스타일 대체 기능은 기본적으로 비활성화되어 있습니다.
font-feature-settings로 활성화하려면 "salt" 기능 태그를 사용하십시오. 주어진 문자에 대해 둘 이상의 스타일 대체가 있을 수 있습니다. 다른 스타일 대체에 액세스하려면 값에 숫자 인덱스를 추가하십시오.
.class {
-moz-font-feature-settings: "salt" 2;
-webkit-font-feature-settings: "salt" 2;
font-feature-settings: "salt" 2;
}
이렇게 하면 글꼴에 두 번째 사용 가능한 스타일 대체가 있는 경우 활성화됩니다. 짐작 하셨겠지만 첫 번째 코드 샘플에서처럼 "salt" 값을 사용하는 것은 "salt" 1 값을 사용하는 것과 같습니다.
지금은 "이름이 지정된" 값(좋은 예가 없음)이 아직 주요 브라우저에서 지원되지 않는 font-feature-value CSS 정의에 의해 스타일 대체 인덱스로 매핑되므로 font-variant 속성은 건너뜁니다.
라이닝 숫자 (lnum)
작동 중인 라이닝 숫자의 예, Warnock Pro에 설정됨.
이 기능은 숫자 글리프를 기본 또는 올드스타일 숫자에서 라이닝 숫자로 변경합니다. 일부 글꼴은 기본 숫자 스타일로 라이닝 숫자를 포함할 수 있으며, 이 경우 이 기능을 활성화하는 것이 글리프 스타일에 영향을 주지 않는 것처럼 보일 수 있습니다.
.class {
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}
라이닝 숫자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-numeric 하위 속성으로 활성화하려면 lining-nums 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "lnum" 기능 태그를 사용하십시오.
올드스타일 숫자 (onum)
작동 중인 올드스타일 숫자의 예, Warnock Pro에 설정됨.
이 기능은 숫자 글리프를 기본 또는 라이닝 숫자에서 올드스타일 숫자로 변경합니다. 일부 글꼴은 기본 숫자 스타일로 올드스타일 숫자를 포함할 수 있으며, 이 경우 이 기능을 활성화하는 것이 글리프 스타일에 영향을 주지 않는 것처럼 보일 수 있습니다.
.class {
font-variant-numeric: oldstyle-nums;
-moz-font-feature-settings: "onum";
-webkit-font-feature-settings: "onum";
font-feature-settings: "onum";
}
올드스타일 숫자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-numeric 하위 속성으로 활성화하려면 oldstyle-nums 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "onum" 기능 태그를 사용하십시오.
비례 숫자 (pnum)
작동 중인 비례 숫자의 예, Hypatia Sans Pro에 설정됨.
이 기능은 균일한(테이블 형식) 폭으로 설정된 숫자 글리프를 글리프별(비례) 폭에 설정된 해당 글리프로 대체합니다. 일부 글꼴은 기본적으로 비례 숫자를 포함할 수 있으며, 이 경우 이 기능을 활성화하는 것이 글리프 폭에 영향을 주지 않는 것처럼 보일 수 있습니다.
.class {
font-variant-numeric: proportional-nums;
-moz-font-feature-settings: "pnum";
-webkit-font-feature-settings: "pnum";
font-feature-settings: "pnum";
}
비례 숫자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-numeric 하위 속성으로 활성화하려면 proportional-nums 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "pnum" 기능 태그를 사용하십시오.
테이블 형식 숫자 (tnum)
작동 중인 테이블 형식 숫자의 예, Hypatia Sans Pro에 설정됨.
이 기능은 글리프별(비례) 폭으로 설정된 숫자 글리프를 균일한(테이블 형식) 폭에 설정된 해당 글리프로 대체합니다. 일부 글꼴은 기본적으로 테이블 형식 숫자를 포함할 수 있으며, 이 경우 이 기능을 활성화하는 것이 글리프 폭에 영향을 주지 않는 것처럼 보일 수 있습니다.
.class {
font-variant-numeric: tabular-nums;
-moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}
테이블 형식 숫자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-numeric 하위 속성으로 활성화하려면 tabular-nums 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "tnum" 기능 태그를 사용하십시오.
분수 (frac)
작동 중인 분수의 예, Warnock Pro에 설정됨.
이 기능은 슬래시로 구분된 숫자를 일반(대각선) 분수로 대체합니다.
.class {
font-variant-numeric: diagonal-fractions;
-moz-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
font-feature-settings: "frac";
}
분수 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-numeric 하위 속성으로 활성화하려면 diagonal-fractions 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "frac" 기능 태그를 사용하십시오.
서수 (ordn)
작동 중인 서수의 예, Warnock Pro에 설정됨.
이 기능은 숫자 뒤에 사용할 수 있도록 기본 알파벳 글리프를 해당 서수 형식으로 대체합니다.
.class {
font-variant-numeric: ordinal;
-moz-font-feature-settings: "ordn";
-webkit-font-feature-settings: "ordn";
font-feature-settings: "ordn";
}
서수 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-numeric 하위 속성으로 활성화하려면 ordinal 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "ordn" 기능 태그를 사용하십시오.
모든 글리프 대체가 숫자 뒤에 나타나지는 않습니다. OpenType 사양에 따라, "숫자 뒤 규칙의 한 가지 예외는 사실은 합자 대체인 숫자 문자(U+2116)이지만 이 기능을 통해 가장 잘 액세스할 수 있습니다."
스타일 세트 (ss##)
작동 중인 스타일 세트의 예, Hypatia Sans Pro에 설정됨.
이 기능은 기본 문자 글리프 세트를 해당하는 스타일 변형으로 대체합니다. 스타일 세트의 글리프는 시각적으로 조화를 이루도록 설계되어 특정 방식으로 상호 작용하거나 함께 작동할 수 있습니다. 참조 항목: 스타일 대체(salt), 개별 글리프의 스타일 대체를 제공하도록 설계되었습니다.
.class {
-moz-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
font-feature-settings: "ss01";
}
스타일 세트 기능은 기본적으로 비활성화되어 있습니다.
font-feature-settings으로 활성화하려면 "ss ##" 기능 태그를 사용하십시오. 여기서 "##"은 01~20 사이 임의의 숫자 두 자리 조합입니다. 글꼴은 완전히 임의적이고 맞춤화된 방식으로 스타일 세트를 사용합니다. 예를 들어 두 개의 다른 글꼴이 동일한 기능(예: ss01)을 사용하여 완전히 다른 글리프 세트를 대체할 수 있습니다. 또는 특정 글꼴이 ss01 및 ss03을 사용하여 글리프 세트를 대체하지만 ss02는 무시할 수도 있습니다. 일부 서체 제작사는 기능 구성 방법에 대한 문서를 제공합니다.
지금은 "이름이 지정된" 값(예: styleset(sharp-serifs))이 아직 주요 브라우저에서 지원되지 않는 font-feature-value CSS 정의에 의해 숫자 스타일 세트 인덱스로 매핑되므로 font-variant 속성은 건너뜁니다.
비례 폭 (pwid)
작동 중인 비례 폭의 예, Kozuka Mincho Pr6n에 설정:
이 기능은 균일한 폭(일반적으로 전체 또는 절반의)으로 설정된 글리프를 비례 간격 글리프로 대체합니다. 비례 변형은 CJKV 글꼴의 라틴 문자에 자주 사용되지만 일본어 글꼴의 가나에도 사용할 수 있습니다. (소스.)
.class {
font-variant-east-asian: proportional-width;
-moz-font-feature-settings: "pwid";
-webkit-font-feature-settings: "pwid";
font-feature-settings: "pwid";
}
비례 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 proportional-width 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "pwid" 기능 태그를 사용하십시오.
비례 대체 폭 (palt)
작동 중인 비례 대체 폭의 예, Source Han Sans에 설정됨:
이 기능은 전체 폭으로 설정되도록 설계된 글리프의 간격을 조정하여 개별(다소 비례적인) 가로 폭에 맞춥니다. 새로운 글리프를 대체하지 않는다는 점에서 pwid와는 다릅니다(GSUB 기능이 아닌 GPOS). 사용자는 고정 폭 형식을 선호할 수도 있고, 단순히 글리프가 잘 맞고 세로 설정에서 회전되지 않는지 확인하기를 바랄 수도 있습니다(비례 간격용으로 설계된 라틴 양식은 회전됨). (소스.)
.class {
-moz-font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
비례 대체 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "palt" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
비례 가나 (pkna)
작동 중인 비례 가나의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 균일한 폭(절반 또는 전체 폭)에 설정된 가나 및 가나 관련 글리프를 비례 글리프로 대체합니다. 비례 폭 기능과 유사하지만 가나에만 영향을 줍니다. (소스.)
.class {
-moz-font-feature-settings: "pkna";
-webkit-font-feature-settings: "pkna";
font-feature-settings: "pkna";
}
비례 가나 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "pkna" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
전체 폭 (fwid)
작동 중인 전체 폭의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 다른 폭으로 설정된 글리프를 전체 폭(일반적으로는)으로 설정된 글리프로 대체합니다. CJKV 글꼴에서는 "하위 ASCII" 라틴 문자와 다양한 기호가 포함될 수 있습니다. 유럽 글꼴에서 이 기능은 비례 간격 글리프를 일반적으로 0.6 폭으로 설정되는 고정 폭 글리프로 대체합니다. (소스.)
.class {
font-variant-east-asian: full-width;
-moz-font-feature-settings: "fwid";
-webkit-font-feature-settings: "fwid";
font-feature-settings: "fwid";
}
전체 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 full-width 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "fwid" 기능 태그를 사용하십시오.
절반 폭 (hwid)
작동 중인 절반 폭의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 비례 폭의 글리프 또는 1/2 이외의 고정 폭을 절반 폭의 글리프로 대체합니다. 많은 CJKV 글꼴에는 여러 폭으로 설정된 글리프가 있으며, 이 기능은 절반 버전을 선택합니다. 이전 데스크탑 문서와의 호환성 등 이 기능이 선호되는 비헤이비어인 다양한 컨텍스트가 있습니다. (소스.)
.class {
-moz-font-feature-settings: "hwid";
-webkit-font-feature-settings: "hwid";
font-feature-settings: "hwid";
}
절반 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "hwid" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
대체 절반 폭 (halt)
작동 중인 대체 절반 폭의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 전체 폭으로 설정되도록 설계된 글리프의 간격을 조정하여 절반 폭에 맞춥니다. 새로운 글리프를 대체하지 않는다는 점에서 hwid와는 다릅니다. (소스.)
.class {
-moz-font-feature-settings: "halt";
-webkit-font-feature-settings: "halt";
font-feature-settings: "halt";
}
절반 대체 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "halt" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
1/3 폭 (twid)
작동 중인 1/3 폭의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 다른 폭으로 설정된 글리프를 1/3 폭으로 설정된 글리프로 대체합니다. 관련된 문자는 일반적으로 숫자 및 일부 구두점 형식입니다. (소스.)
.class {
-moz-font-feature-settings: "twid";
-webkit-font-feature-settings: "twid";
font-feature-settings: "twid";
}
1/3 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "twid" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
1/4 폭 (qwid)
작동 중인 1/4 폭의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 다른 폭으로 설정된 글리프를 1/4(절반) 폭으로 설정된 글리프로 대체합니다. 관련된 문자는 일반적으로 숫자 및 일부 구두점 형식입니다. (소스.)
.class {
-moz-font-feature-settings: "qwid";
-webkit-font-feature-settings: "qwid";
font-feature-settings: "qwid";
}
1/4 폭 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "qwid" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
JIS78 양식 (jp78)
작동 중인 JIS78 양식의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 기본 (JIS90) 일본어 글리프를 JIS C 6226-1978(JIS78) 사양의 해당 형식으로 대체합니다. (소스.)
.class {
font-variant-east-asian: jis78;
-moz-font-feature-settings: "jp78";
-webkit-font-feature-settings: "jp78";
font-feature-settings: "jp78";
}
JIS78 양식 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 jis78 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "jp78" 기능 태그를 사용하십시오.
JIS83 양식 (jp83)
작동 중인 JIS83 양식의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 기본 (JIS90) 일본어 글리프를 JIS X 0208-1983(JIS83) 사양의 해당 형식으로 대체합니다. (소스.)
.class {
font-variant-east-asian: jis83;
-moz-font-feature-settings: "jp83";
-webkit-font-feature-settings: "jp83";
font-feature-settings: "jp83";
}
JIS83 양식 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 jis83 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "jp83" 기능 태그를 사용하십시오.
JIS90 양식 (jp90)
작동 중인 JIS90 양식의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 JIS78 또는 JIS83 사양의 일본어 글리프를 JIS X 0208-1990(JIS90) 사양의 해당 형식으로 대체합니다. (소스.)
.class {
font-variant-east-asian: jis90;
-moz-font-feature-settings: "jp90";
-webkit-font-feature-settings: "jp90";
font-feature-settings: "jp90";
}
JIS90 양식 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 jis90 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "jp90" 기능 태그를 사용하십시오.
JIS2004 양식 (jp04)
작동 중인 JIS2004 양식의 예, Kozuka Mincho Pro에 설정됨:
일본의 NLC(National Language Council)는 JIS X 0213:2004에 새로운 프로토타입 형식으로 통합된 여러 JIS 문자를 위한 새로운 글리프 모양을 정의했습니다. 'jp04' 기능은 'nlck' 기능의 하위 집합이며 JIS X 0213:2004의 무결성을 유지하는 방식으로 이러한 프로토타입 글리프에 액세스하는 데 사용됩니다. (소스.)
.class {
font-variant-east-asian: jis04;
-moz-font-feature-settings: "jp04";
-webkit-font-feature-settings: "jp04";
font-feature-settings: "jp04";
}
JIS2004 양식 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 jis04 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "jp04" 기능 태그를 사용하십시오.
번체 양식 (trad)
작동 중인 번체 양식의 예, Kozuka Mincho Pr6n에 설정됨:
'간체' 중국어 한자 또는 일본어 한자 형식을 해당 '번체' 형식으로 대체합니다. (소스.)
.class {
font-variant-east-asian: traditional;
-moz-font-feature-settings: "trad";
-webkit-font-feature-settings: "trad";
font-feature-settings: "trad";
}
번체 양식 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 traditional 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "trad" 기능 태그를 사용하십시오.
루비 표기법 양식 (ruby)
작동 중인 루비 표기법 양식의 예, Kozuka Mincho Pr6n에 설정됨:
일본어 조판은 일반적으로 위 첨자 형태의 작은 가나 문자를 사용하여 익숙하지 않은 한자의 의미를 독자에게 명확하게 알려 줍니다. 4포인트 크기 유형에 대한 예전 조판 용어를 따서 루비라고 불립니다. 이 기능은 이 용도로 설계된 글꼴의 글리프를 식별하여 기본 디자인으로 대체합니다. (소스.)
.class {
font-variant-east-asian: ruby;
-moz-font-feature-settings: "ruby";
-webkit-font-feature-settings: "ruby";
font-feature-settings: "ruby";
}
루비 표기법 양식 기능은 기본적으로 비활성화되어 있습니다. font-variant 속성 또는 font-variant-east-asian 하위 속성으로 활성화하려면 ruby 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "ruby" 기능 태그를 사용하십시오.
위의 코드 샘플에서 스타일링 중인 rt 요소를 참조하십시오. 적절한 루비 텍스트용 마크업은 텍스트 수준 의미론 섹션에 있는 W3C의 HTML5 사양에 설명되어 있습니다. 또한 루비 텍스트의 위치와 크기는 브라우저/버전에 따라 다릅니다. 스타일 시트 재설정 정을 사용하여 브라우저 기본값을 비활성화하고 루비 텍스트의 크기/위치를 수동으로 조정하는 것이 좋습니다.
가로 가나 대체 (hkna)
작동 중인 가로 가나 대체의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 표준 가나를 가로 쓰기 전용으로 특별히 설계된 양식으로 대체합니다. 맞춤을 향상시키고 색상을 보다 균일하게 만드는 타이포그래피 최적화 기능입니다. (소스.)
.class {
-moz-font-feature-settings: "hkna";
-webkit-font-feature-settings: "hkna";
font-feature-settings: "hkna";
}
가로 가나 대체 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "hkna" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
NLC 한자 양식 (nlck)
작동 중인 NLC 한자 양식의 예, Kozuka Mincho Pr6n에 설정됨:
일본 NLC(National Language Council)는 2000년에 여러 JIS 문자를 위한 새로운 글리프 모양을 정의했습니다. 'nlck' 기능은 이러한 글리프에 액세스하는 데 사용됩니다. (소스.)
.class {
-moz-font-feature-settings: "nlck";
-webkit-font-feature-settings: "nlck";
font-feature-settings: "nlck";
}
NLC 한자 양식 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "nlck" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
대체 주석 양식 (nalt)
작동 중인 대체 주석 양식의 예, Kozuka Mincho Pr6n에 설정됨:
이 기능은 기본 글리프를 다양한 표기 형식으로 대체합니다(예: 열린 원 또는 단색 원, 사각형, 괄호, 다이아몬드 또는 둥근 상자에 배치된 글리프). 주석 양식이 이미 있지만 사용자가 다른 양식을 원하는 경우도 있을 수 있습니다. (소스.)
.class {
-moz-font-feature-settings: "nalt";
-webkit-font-feature-settings: "nalt";
font-feature-settings: "nalt";
}
대체 주석 양식은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "nalt" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
이탤릭체 (ital)
작동 중인 이탤릭체의 예, Kozuka Mincho Pr6n에 설정됨:
일부 글꼴(예: Adobe의 Pro Japanese 글꼴)에는 단일 글꼴에 일부 문자의 로마자와 이탤릭 양식이 모두 있습니다. 이 기능은 로마자 글리프를 해당하는 이탤릭 글리프로 대체합니다. (소스.)
.class {
-moz-font-feature-settings: "ital";
-webkit-font-feature-settings: "ital";
font-feature-settings: "ital";
}
이탤릭체 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "ital" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
참고: 세로 기능 정보
다음 OpenType 기능은 글리프 간격을 변경하고 대체하여 세로 방향 텍스트가 더 잘 보이게 만듭니다. 그러나 세로 방향에 대한 브라우저 지원은 제한됩니다. 따라서 이러한 OT 기능은 지원되고 제대로 작동하더라도 세로 방향이 또한 지원되지 않고 제대로 작동하지 않는 경에는.…음, 이러한 기능은 중요하지 않습니다.
.class {
direction: rtl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
-ms-text-orientation: upright;
text-orientation: upright;
}
여기에 있는 코드는 W3C의 CSS 작성 모드 레벨 3 편집자 초안 및 David Storey의 멋진 연구를 기반으로 합니다. 어떻게 진행되고 있는지 확인할 수 있지만 브라우저 지원은 현재 제공되지 않습니다. 위의 코드를 테스트했으며 쓰기 모드는 Chrome에서만 작동했습니다.
세로 커닝 (vkrn)
이 기능은 일반적으로 글리프 사이에 시각적으로 일관된 간격을 제공하기 위해 글리프 사이의 간격을 조정합니다. 잘 디자인된 서체는 글리프 간격이 전체적으로 일관되지만 일부 글리프 조합은 가독성을 높이기 위한 조정이 필요합니다. 세로 방향의 표준 조정 외에도 이 기능은 디바이스 테이블을 통해 크기에 따른 커닝 데이터, X 텍스트 방향의 "교차 스트림" 커닝, 글리프 배치 조정을 고급 조정과 관계없이 제공할 수 있습니다. 이 기능은 두 개 이상의 글리프 실행에 적용될 수 있으며 고정 폭 글꼴에는 사용되지 않습니다. 또한 이 기능은 세로로 설정된 텍스트에만 적용됩니다. (소스.)
.class {
-moz-font-feature-settings: "vkrn", "vpal";
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
세로 커닝 기능은 기본적으로 비활성화되며 IE 또는 Mac OS나 iOS의 Safari 버전에서는 지원되지 않습니다. 이 기능은 Firefox에서는 지원될 수도 있지만, 세로쓰기 텍스트는 지원되지 않습니다. 따라서 사실상 지원되지 않는 것입니다. 활성화하는 유일한 방법은 "vkrn" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다. vkrn이 활성화된 경우 vpal도 활성화되어야 합니다. 참조 항목: 여러 OpenType 기능을 사용하기 위한 구문 및 참고: 세로 기능 정보.
세로 대체 (vert)
이 기능은 세로 쓰기 모드에서 기본 양식을 세로 쓰기에 맞게 조정된 변형으로 대체합니다. 대부분의 CJKV 글리프는 세로 쓰기 모드로 설정될 때 세로로 유지되지만 일부는 이런 목적으로 다른 양식(일반적으로 회전된 양식 및 위치가 변경된 양식)을 사용합니다. 이 기능이 적용되는 글리프는 일반적으로 저사양 DTP 애플리케이션에서 회전하는 세트에 해당합니다. (소스.)
세로 대체 기능은 기본적으로 활성화되어 있으므로 CSS를 작성하지 않아도 작동해야 하지만 모든 버전의 IE 또는 Firefox에서는기본적으로 활성화되어 있지 않습니다. 또한 Safari(Mac 또는 iOS)에서는 전혀 활성화할 수 없습니다. 참조 항목: 참고: 세로 기능 정보
.class {
-moz-font-feature-settings: "vert";
-webkit-font-feature-settings: "vert";
font-feature-settings: "vert";
}
세로 대체 기능을 활성화하는 유일한 방법은 "vert" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다.
비례 대체 세로 메트릭 (vpal)
이 기능은 전체 높이로 설정되도록 설계된 글리프의 간격을 조정하여 개별(다소 비례적인) 세로 높이에 맞춥니다. 새로운 글리프를 대체하지 않는다는 점에서 valt와는 다릅니다(GSUB 기능이 아닌 GPOS). 사용자는 고정 폭 형식을 선호할 수도 있고, 단순히 글리프가 잘 맞는지 확인하기를 바랄 수도 있습니다. (소스.)
.class {
-moz-font-feature-settings: "vpal";
-webkit-font-feature-settings: "vpal";
font-feature-settings: "vpal";
}
비례 대체 세로 메트릭 기능은 기본적으로 비활성화되며 IE 또는 Mac OS나 iOS의 Safari 버전에서는 지원되지 않습니다. 이 기능은 Firefox에서는 지원될 수도 있지만, 세로쓰기 텍스트는 지원되지 않습니다. 따라서 사실상 지원되지 않는 것입니다. 활성화하는 유일한 방법은 "vpal" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다. 참조 항목: 참고: 세로 기능 정보
대체 세로 반자 메트릭 (vhal)
이 기능은 전체 높이로 설정되도록 설계된 글리프의 간격을 조정하여 절반 높이에 맞춥니다. (소스.)
.class {
-moz-font-feature-settings: "vhal";
-webkit-font-feature-settings: "vhal";
font-feature-settings: "vhal";
}
대체 세로 절반 메트릭 기능은 기본적으로 비활성화되며 IE, Firefox 또는 Mac OS나 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "vhal" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다. 참조 항목: 참고: 세로 기능 정보
세로 가나 대체 (vkna)
이 기능은 표준 가나를 세로 쓰기 전용으로 특별히 설계된 양식으로 대체합니다. 맞춤을 향상시키고 색상을 보다 균일하게 만드는 타이포그래피 최적화 기능입니다. hkna도 참조하십시오. (소스.)
.class {
-moz-font-feature-settings: "vkna";
-webkit-font-feature-settings: "vkna";
font-feature-settings: "vkna";
}
세로 가나 대체 기능은 기본적으로 비활성화되며 Mac OS 또는 iOS의 Safari 버전에서는 지원되지 않습니다. 활성화하는 유일한 방법은 "vkna" 기능 태그를 사용하여 font-feature-setting으로 활성화하는 것입니다. 참조 항목: 참고: 세로 기능 정보
커닝 (kern)
작동 중인 커닝의 예, 소스 Sans Pro에 설정됨:
이 기능은 일반적으로 글리프 사이에 시각적으로 일관된 간격을 제공하기 위해 글리프 사이의 간격을 조정합니다. 잘 디자인된 서체는 글리프 간격이 전체적으로 일관되지만 일부 글리프 조합은 가독성을 높이기 위한 조정이 필요합니다. 이 기능은 두 개 이상의 글리프 실행에 적용될 수 있으며 고정 폭 글꼴에는 사용되지 않습니다. 또한 이 기능은 세로로 설정된 텍스트에는 적용되지 않습니다. (소스.)
.class {
font-kerning: normal;
-moz-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
}
커닝 기능은 기본적으로 비활성화되어 있지만 많은 경우에 활성화하는 것이 매우 중요합니다.
font-kerning 속성으로 활성화하려면 normal 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "kern" 기능 태그를 사용하십시오.
글리프 구성/분해 (ccmp)
작동 중인 글리프 구성/분해의 예, Source Han Sans에 설정됨:
글리프 대체 수를 최소화하기 위해 경우에 따라 문자를 두 개의 글리프로 분해하는 것이 바람직합니다. 또한 글리프를 더 잘 처리하기 위해 두 문자를 단일 글리프로 구성하는 것이 좋을 수도 있습니다. 이 기능은 이러한 구성/분해를 허용합니다. 기능은 처리된 첫 번째 기능으로 처리되어야 하며 호출될 때만 처리되어야 합니다. (소스.)
글리프 구성/분해 기능은 기본적으로 활성화되어 있습니다. 즉, CSS를 작성하지 않아도 작동해야 하지만 활성화되었는지 확인하는 데 몇 가지 까다로운 조건이 있습니다. 이 기능은 Chrome 또는 Safari에서는 기본적으로 활성화되어 있지 않지만 font-feature-settings 값을 사용하면 활성화됩니다.
.class {
-moz-font-feature-settings: "ccmp";
-webkit-font-feature-settings: "ccmp";
font-feature-settings: "ccmp";
}
글리프 구성/분해 기능이 활성화되어 있는지 확인하려면 "ccmp" 기능 태그를 명시적으로 사용하거나 다른 font-feature-settings 값을 사용하십시오.
현지화된 양식 (locl)
넓은 지리적 영역에 걸쳐 여러 언어를 작성하는 데 사용되는 많은 스크립트는 개별 문학 커뮤니티에서 사용하는 특정 문자의 현지화된 변형 양식 개발했습니다. 예를 들어 불가리아어 및 세르비아어 알파벳의 여러 문자는 러시아어 문자와는 다른 양식을 가지고 있습니다. 일부의 경우에는 현지화된 양식이 스크립트 'norm'과 미묘하게 다를 뿐입니다. 다른 경우에는 양식들이 근본적으로 구별됩니다. 이 기능을 사용하면 현지화된 글리프 양식을 기본 양식으로 대체할 수 있습니다. (소스.)
현지화된 양식 기능은 기본적으로 활성화되어 있으므로 CSS를 작성하지 않아도 작동해야 하지만 실제로는 Firefox에서만 기본적으로 활성화되며 Safari(Mac 또는 iOS) 또는 Android에서는 전혀 지원되지 않습니다.
.class {
-moz-font-feature-settings: "locl";
-webkit-font-feature-settings: "locl";
font-feature-settings: "locl";
}
현지화된 양식 기능이 활성화되었는지 확인하려면 "locl" 기능 태그를 명시적으로 사용하십시오.
위 첨자 (sups)
작동 중인 위 첨자의 예, Hypatia Sans Pro에 설정됨.
이 기능은 라이닝 또는 올드스타일 숫자를 어깨 숫자(주로 각주 표시에 사용)로 대체하고 소문자를 어깨 글자(주로 축약된 프랑스 칭호에 사용)로 대체합니다.
.class {
font-variant-position: super;
-moz-font-feature-settings: "sups";
-webkit-font-feature-settings: "sups";
font-feature-settings: "sups";
}
위 첨자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-position 하위 속성으로 활성화하려면 super 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 "sups" 기능 태그를 사용하십시오.
아래 첨자 (subs)
작동 중인 아래 첨자의 예, Warnock Pro에 설정됨.
이 기능은 기본 글리프를 아래 첨자 글리프로 대체할 수도 있고, 적절한 배치를 위해 글리프 대체와 위치 조정을 결합할 수도 있습니다.
.class {
font-variant-position: sub;
-moz-font-feature-settings: "subs";
-webkit-font-feature-settings: "subs";
font-feature-settings: "subs";
}
아래 첨자 기능은 기본적으로 비활성화되어 있습니다.
font-variant 속성 또는 font-variant-position 하위 속성으로 활성화하려면 sub 값을 사용하십시오. font-feature-settings로 동일한 효과를 얻으려면 “subs” 기능 태그를 사용하십시오.
