- Adobe Fonts 사용 안내서
- 소개
- 글꼴 라이선싱
- 글꼴 다운로드 및 사용하기
- 웹 디자인 및 개발
- 웹 사이트에 글꼴 추가
- 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
- 글꼴 문제 해결
- HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
- AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
- CSS 선택기
- 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
- 임베드 코드
- 동적 하위 집합 및 웹 글꼴 제공
- 글꼴 이벤트
- 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
- 사이트가 use.typekit.net에 연결되지 않습니다.
- CodePen에서 웹 글꼴 사용하기
- 브라우저 및 OS 지원
- 도메인
- 로컬에서 개발 시 웹 글꼴 사용하기
- 콘텐츠 보안 정책
- 웹 글꼴 인쇄하기
- 언어 지원 및 OpenType 기능
- 글꼴 기술
OpenType 기능은 글꼴의 비밀 서랍과 같습니다. 잠금을 해제하면 글꼴이 미묘하고 극적인 방식으로 다르게 보이고 다르게 작동하는 방법을 확인할 수 있습니다. 모든 OpenType 기능이 모든 상황에 사용하기에 적합한 것은 아니지만 일부 기능은 훌륭한 타이포그래피를 만드는 데 아주 중요합니다.
프로젝트에서 글꼴의 OpenType 기능을 사용하려면 웹 프로젝트에 글꼴을 포함시킨 다음 필요한 CSS로 텍스트로 스타일을 지정해야 합니다. CSS에 복사하여 붙여넣을 수 있는 코드가 있는 각 기능의 예는 구문 가이드를 참조하십시오.
프로젝트에 OpenType 기능 포함
웹 프로젝트에 글꼴의 OpenType 기능을 포함하려면 웹 프로젝트 페이지로 이동하여 프로젝트에 대한 "편집" 링크를 클릭합니다. 문자 세트 섹션에서 OpenType 기능 확인란을 선택합니다.
확인란을 선택하면 합자, 대체 문자 또는 작은 대문자와 같은 특정 웹 글꼴 패밀리에 사용할 수 있는 기능 목록이 표시됩니다.
이 목록은 패밀리의 모든 두께와 스타일에서 사용할 수 있는 OpenType 기능을 보여 줍니다. 기능이 특정 두께 또는 스타일에만 포함된 경우 목록에 포함되지 않습니다.
사용 중인 기능에 대한 브라우저 지원 확인
font-variant 및 font-feature-settings에 대한 브라우저 지원이 부족하면 OpenType 기능이 중요한 모든 컨텍스트에서 제대로 작동하지 않을 수 있습니다.
지원이라는 것은 당황스러울 정도로 미묘합니다. 지원을 요청하는 최신 브라우저 버전은 경고와 함께 제공되며 OpenType 기능을 지원하지 않는 이전 브라우저는 경고에 질식할 수 있습니다. Chrome은 기본적으로 활성화되어야 하는 기능(예: 일반 합자 및 상황별 대체)을 사용하지 않습니다. macOS 및 iOS의 Safari는 지정된 font-feature-settings 값을 무시하고 대신 기본적으로 몇 가지 기능을 활성화하도록 선택합니다. 기본 선택 사항은 수정할 수 없습니다. Firefox의 일부 버전(버전 15 이하)은 여러 스타일 세트를 활성화하는 경우 문제가 발생합니다. Chrome 32 및 이전 버전에서 OpenType 기능을 적용하면 웹 글꼴이 작동하지 않습니다.
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
현재 브라우저 지원은 공급업체 프리픽스에 크게 의존합니다. CSS의 OpenType 기능에 대한 구문 도움말 문서에서는 위의 샘플과 같은 공급업체 프리픽스 속성으로 가득 찬 코드가 있습니다.
CSS를 사용하여 OpenType 기능으로 텍스트 스타일 지정
OpenType 기능을 활성화하기 위한 CSS 구문은 여전히 진화하고 있습니다. 여러분이 아셔야 할 것은 높은 수준의 속성과 낮은 수준의 속성이 모두 있으며 상속이 특히 까다롭다는 것입니다.
낮은 수준의 CSS font-feature-settings 속성은 공급업체 프리픽스를 통해 브라우저에서 어느 정도 지원되지만 두 가지 이유로 사용하기가 번거롭습니다. 첫째, 기억하기 어려운 4자 OpenType 기능 태그에 의존합니다. 둘째, 모든 기능 태그가 단일 속성에 지정되어 있어 상황이 복잡해질 수 있습니다. 특정 OpenType 기능에 대한 구문 및 여러 OpenType 기능을 사용하기 위한 구문을 참조하십시오.
높은 수준의 CSS font-variant 속성과 하위 속성은 "작은 대문자" 및 "대각선 분수"와 같은 자연어 값을 사용하기 때문에 내우 좋습니다. W3C는 가능하면 이 속성들이 사용되기를 바라지만 브라우저 지원이 존재하지 않습니다. 그래도 구문에 익숙해지는 것이 좋습니다.
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
따라서 작동하도록 설계된 방식을 염두에 두고 font-variant 및 font-feature-settings를 모두 사용할 것입니다. 위의 코드와 같이 CSS에서 읽기 쉬운 font-variant를 먼저 지정합니다.
상속
font-feature-setting은 "자주 사용되지 않는 특정 글꼴 기능에 액세스하는 유일한 방법인 특수한 경우"를 위한 낮은 수준의 속성이기 때문에 소스 순서에 관계없이 font-variant를 재정의합니다. 하지만 속성 그 자체도 재정의하므로 조심하십시오.
body {
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp"; /* disables onum from body declaration */
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "onum", "smcp";
}
인덱싱된 font-feature-settings 값
일부 font-feature-settings 값은 조금 더 복잡합니다. 지금까지의 예에서 각 값은 문자열(또는 쉼표로 구분된 문자열 집합)이었습니다. "onum" 및 "smcp"와 같은 기능 태그의 유무는 양자 택일과 같습니다. 기능은 켜짐 또는 꺼짐 중 하나입니다.
그건 이해하기 쉽습니다. 하지만, 예를 들어 글꼴에 두 가지 다른 스와시 버전의 대문자 'A'가 포함되어 있다면 어떻게 될까요? 이 경우, 단순히 스와시만 활성화하는 것이 아니라 스와시를 활성화하면서 특정 스와시를 선택하고 싶을 것입니다. 그러면 문자열 뒤에 숫자 인덱스를 값에 추가할 수 있습니다.
font-feature-settings: "swsh" 2;
여러 OpenType 기능 사용하기
font-variant 속성은 모든 font-variant 하위 속성에 대한 CSS 줄임 속성입니다. 다음과 같이 일반 합자 및 올드스타일 숫자를 활성화할 수 있습니다.
.class {
font-variant: common-ligatures, oldstyle-nums;
}
마찬가지로 쉼표로 구분된 값 목록과 함께 font-feature-settings를 사용하여 여러 기능을 활성화할 수 있습니다.
.class {
font-feature-settings: "liga", "onum";
}
이 두 경우 모두 상속된 값이 완전히 재정의되고 브라우저 지원은 달라질 수 있습니다. font-variant 값은 한 번에 여러 기능을 사용하도록 설계된 경우가 있습니다.(참조: 대문자에서 작은 대문자로).
리소스
CSS로 스타일링을 시작할 준비가 되었으면 자주 사용하는 OpenType 기능의 구문 용어집에 책갈피 표시를 하십시오.
