사용 안내서 취소

OpenType 기능 사용하기

  1. Adobe Fonts 사용 안내서
  2. 소개
    1. 시스템 및 구독 요구 사항
    2. 브라우저 및 OS 지원
    3. 컴퓨터에서 글꼴 활성화
    4. 웹 사이트에 글꼴 추가
    5. CC Mobile에서 글꼴 활성화
  3. 글꼴 라이선싱
    1. 글꼴 라이선싱
    2. 계정 관리
    3. Creative Cloud for enterprise 고객에 대한 라이선싱
    4. 계정에 글꼴 라이선스 추가하기
    5. 구독 라이브러리에서 글꼴 제거하기
    6. 중국에서 등록된 Adobe ID로는 Adobe Fonts를 사용할 수 없습니다.
    7. 이들 글꼴이 내 Creative Cloud 구독에 포함되지 않은 이유는 무엇입니까?
    8. Morisawa 글꼴 제거 2021년 9월
  4. 글꼴 다운로드 및 사용하기
    1. Creative Cloud 앱에서 Adobe Fonts 사용하기
    2. 내 글꼴 관리
    3. 데스크탑 애플리케이션에서 누락된 글꼴 문제 해결
    4. InDesign에서 글꼴 사용하기
    5. 글꼴 및 타이포그래피
    6. HTML5 Canvas 문서에서 웹 글꼴 사용하기
    7. InCopy에서 글꼴 사용하기
    8. Adobe Muse에서 글꼴을 사용하는 방법
    9. Muse에서 웹 글꼴 사용하기
    10. 글꼴 파일 패키징
    11. 문제 해결 가이드: 글꼴 활성화
    12. 활성 글꼴이 글꼴 메뉴에 추가되지 않습니다.
    13. “하나 이상의 글꼴을 활성화할 수 없음” 또는 “이름이 같은 글꼴이 이미 설치되어 있음”
    14. 사용하고 있는 글꼴을 제작자가 업데이트하면 어떻게 됩니까?
  5. 웹 디자인 및 개발
    1. 웹 사이트에 글꼴 추가
    2. 문제 해결 가이드: 웹 사이트에 글꼴 추가하기
    3. HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
    4. AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
    5. CSS 선택기
    6. 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
    7. 임베드 코드
    8. 동적 하위 집합 및 웹 글꼴 제공
    9. 글꼴 이벤트
    10. 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
    11. 사이트가 use.typekit.net에 연결되지 않습니다.
    12. CodePen에서 웹 글꼴 사용하기
    13. 브라우저 및 OS 지원
    14. 도메인
    15. 로컬에서 개발 시 웹 글꼴 사용하기
    16. 콘텐츠 보안 정책
    17. 웹 글꼴 인쇄하기
  6. 언어 지원 및 OpenType 기능
    1. 언어 지원 및 하위 집합
    2. OpenType 기능 사용하기
    3. CSS의 OpenType 기능에 대한 구문
  7. 글꼴 기술
    1. OpenType-SVG 색상 글꼴
    2. Ten Mincho: 버전 1.000에서 업데이트 시 중요 사항

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 */
}

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

.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;

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

여러 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 기능의 구문 용어집에 책갈피 표시를 하십시오.

Adobe 로고

내 계정 로그인