사용 안내서 취소

OpenType 기능 사용하기

검색

마지막 업데이트 날짜 2023년 6월 23일

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: &quot;smcp&quot;;
-webkit-font-feature-settings: &quot;smcp&quot;;
font-feature-settings: &quot;smcp&quot;;

현재 브라우저 지원은 공급업체 프리픽스에 크게 의존합니다. 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: &quot;smcp&quot;;
}

따라서 작동하도록 설계된 방식을 염두에 두고 font-variant 및 font-feature-settings를 모두 사용할 것입니다. 위의 코드와 같이 CSS에서 읽기 쉬운 font-variant를 먼저 지정합니다.

상속

font-feature-setting은 "자주 사용되지 않는 특정 글꼴 기능에 액세스하는 유일한 방법인 특수한 경우"를 위한 낮은 수준의 속성이기 때문에 소스 순서에 관계없이 font-variant를 재정의합니다. 하지만 속성 그 자체도 재정의하므로 조심하십시오.

body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: &quot;onum&quot;;
}

.class {
  font-variant-caps: small-caps;
  font-feature-settings: &quot;smcp&quot;; /* disables onum from body declaration */
}

상속된 font-feature-settings 값은 속성이 다시 적용될 때 재정의됩니다. 위의 예에서, 클래스의 클래스가 있는 요소의 경우 작은 대문자(smcp) 및 올드스타일 숫자(onum)를 모두 활성화하려면 'onum' 값을 다시 포함해야 합니다. 따라서 다음과 같이 선언을 다시 작성할 수 있습니다.

.class {
  font-variant-caps: small-caps;
  font-feature-settings: &quot;onum&quot;, &quot;smcp&quot;;
}

인덱싱된 font-feature-settings 값

일부 font-feature-settings 값은 조금 더 복잡합니다. 지금까지의 예에서 각 값은 문자열(또는 쉼표로 구분된 문자열 집합)이었습니다. "onum" 및 "smcp"와 같은 기능 태그의 유무는 양자 택일과 같습니다. 기능은 켜짐 또는 꺼짐 중 하나입니다.

그건 이해하기 쉽습니다. 하지만, 예를 들어 글꼴에 두 가지 다른 스와시 버전의 대문자 'A'가 포함되어 있다면 어떻게 될까요? 이 경우, 단순히 스와시만 활성화하는 것이 아니라 스와시를 활성화하면서 특정 스와시를 선택하고 싶을 것입니다. 그러면 문자열 뒤에 숫자 인덱스를 값에 추가할 수 있습니다.

font-feature-settings: &quot;swsh&quot; 2;

여기에 어떤 숫자를 사용해야 할까요? 글꼴에는 몇 개의 스와시가 있습니까? 글쎄요. 그건 글꼴에 따라 다릅니다. '0'을 사용하면 스와시 기능이 꺼집니다. 스타일 대체 및 스타일 세트와 같이 숫자 인덱스를 사용하는 다른 기능에도 동일하게 적용됩니다.

여러 OpenType 기능 사용하기

font-variant 속성은 모든 font-variant 하위 속성에 대한 CSS 줄임 속성입니다. 다음과 같이 일반 합자 및 올드스타일 숫자를 활성화할 수 있습니다.

.class {
  font-variant: common-ligatures, oldstyle-nums;
}

마찬가지로 쉼표로 구분된 값 목록과 함께 font-feature-settings를 사용하여 여러 기능을 활성화할 수 있습니다.

.class {
  font-feature-settings: &quot;liga&quot;, &quot;onum&quot;;
}

이 두 경우 모두 상속된 값이 완전히 재정의되고 브라우저 지원은 달라질 수 있습니다. font-variant 값은 한 번에 여러 기능을 사용하도록 설계된 경우가 있습니다.(참조: 대문자에서 작은 대문자로).

리소스

CSS로 스타일링을 시작할 준비가 되었으면 자주 사용하는 OpenType 기능의 구문 용어집에 책갈피 표시를 하십시오.

쉽고 빠르게 지원 받기

신규 사용자이신가요?