- Adobe Fonts 사용 안내서
- 소개
- 글꼴 라이선싱
- 글꼴 다운로드 및 사용하기
- 웹 디자인 및 개발
- 웹 사이트에 글꼴 추가
- 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
- 글꼴 문제 해결
- HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
- AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
- CSS 선택기
- 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
- 임베드 코드
- 동적 하위 집합 및 웹 글꼴 제공
- 글꼴 이벤트
- 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
- 사이트가 use.typekit.net에 연결되지 않습니다.
- CodePen에서 웹 글꼴 사용하기
- 브라우저 및 OS 지원
- 도메인
- 로컬에서 개발 시 웹 글꼴 사용하기
- 콘텐츠 보안 정책
- 웹 글꼴 인쇄하기
- 언어 지원 및 OpenType 기능
- 글꼴 기술
OpenType-SVG는 OpenType 글꼴에 SVG(크기 조정이 가능한 벡터 그래픽) 아트워크로 표시되는 글리프 전체 또는 일부가 포함된 글꼴 형식입니다. 따라서 단일 글리프에 여러 색상과 그레이디언트를 표시할 수 있습니다. 이러한 기능이 있기 때문에 OpenType-SVG 글꼴을 "색상 글꼴"이라고도 합니다.
OpenType-SVG 글꼴을 사용하면 텍스트를 이러한 그래픽 품질로 표시하는 동시에 편집, 인덱싱 또는 검색이 가능합니다. 글리프 대체 또는 대체 글리프 스타일이 가능한 OpenType 기능을 포함할 수도 있습니다.
Trajan Color Concept 및 EmojiOne Color와 같은 색상 글꼴은 프로그램 글꼴 메뉴의 일반적인 글꼴처럼 표시됩니다. 하지만 많은 프로그램이 아직 색상 구성 요소를 완전히 지원하지 않기 때문에 잠재력을 최대한 발휘하지 못할 수 있습니다. 소프트웨어 프로그램이 글꼴 내에서 SVG 아트워크를 지원하지 않는 경우 글리프는 단색 검정 스타일로 돌아갑니다. 색상은 그대로 일반적인 OpenType 글꼴처럼 작동하므로 이 대체 스타일에 적용할 수 있습니다.
Photoshop에서 OpenType-SVG 색상 글꼴 사용
Photoshop(CC 2017 및 최신 버전)은 OpenType-SVG 글꼴을 지원하며 Trajan Color 및 EmojiOne의 두 가지 글꼴이 함께 제공됩니다. Trajan Color는 Creative Cloud 구독을 통해 웹 및 데스크탑용으로도 포함됩니다.
OpenType-SVG 글꼴을 사용하려면 다음 단계를 따르십시오.
- 단락 또는 포인트 텍스트 문자 레이어를 만듭니다.
- 글꼴을 OpenType-SVG 글꼴로 설정합니다. 이러한 글꼴은 OpenType-SVG 아이콘과 함께 표시됩니다.
- 키보드를 사용하여 입력하거나 글리프 패널을 사용하여 특정 글리프를 선택합니다. 글리프 패널을 보려면 창 > 글리프를 선택합니다.
OpenType SVG 글꼴을 사용하여 문자를 입력할 수 있지만, 글리프 대체의 전체 범위는 글리프 패널을 통해서만 사용할 수 있습니다. 예를 들어 Trajan Color Concept에는 글리프 패널에서 액세스 가능한 은색, 구리색, 강철색, 대리석 무늬 등 각 문자에 대한 20개의 다른 스타일 세트가 포함되어 있습니다.
유형 >도형으로 변환을 선택하여 텍스트 레이어를 편집 가능한 모양으로 변환하면 OpenType-SVG 글꼴의 문자가 흑백 대체 스타일로 되돌아갑니다.
Illustrator에서 OpenType-SVG 색상 글꼴 사용
Illustrator는 Trajan Color 및 Emoji One Color와 같은 OpenType SVG 글꼴을 지원합니다. 글리프 패널을 사용하여 특정 글리프를 설정할 수 있으며 글리프 패널을 사용하여 합성 글리프를 만들고 다른 문자 변형을 탐색할 수도 있습니다. Illustrator의 OpenType SVG 글꼴에 대한 자세한 내용은 https://helpx.adobe.com/illustrator/using/fonts.html#OpenTypeSVGfonts를 참조하십시오.
Trajan Color Concept
Trajan Color Concept는 Adobe Type Concepts 중 하나입니다. Adobe Type Concepts는 민첩한 개발 프로세스와 축소된 문자로 개발된 서체로, 디자인을 확장할 때 모험적인 고객들에게 보다 빨리 피드백을 제공할 수 있습니다.
Trajan Color Concept을 사용하면 다양한(19가지) 색상과 텍스처를 선택할 수 있습니다. 20개의 스타일 세트에서 다양한 색상 조합에 액세스하기 위해 매우 세밀한 SVG 아트워크를 사용하기 때문에 전체 파일 크기가 증가합니다. (이 때문에 사용하기 어려울 것 같다는 생각이 든다면, 맞습니다. 바로 이것이 Trajan Color가 여전히 콘셉트 글꼴로 간주되는 이유 중 하나입니다.)
기본 색상 스타일(금색)과 Trajan Color Concept의 첫 18개 OpenType 스타일 세트가 글꼴에서 사용할 수 있는 모든 다중 색상 옵션을 구성하고 있습니다. OpenType-SVG의 색상 기능을 아직 지원하지 않는 애플리케이션에서 볼 수 있는 대체 스타일은 스타일 세트 20과 동일합니다.
EmojiOne Color
Emoji 글꼴은 OpenType-SVG 글꼴의 예입니다. Emoji 글꼴을 사용하여 웃는 얼굴, 깃발, 도로명 게시판, 동물, 사람, 음식, 랜드마크와 같은 여러 가지 화려한 그래픽 캐릭터를 문서에 포함할 수 있습니다. EmojiOne 글꼴과 같은 OpenType-SVG emoji 글꼴을 사용하여 하나 이상의 다른 글리프에서 특정한 합성 글리프를 만들 수 있습니다. 예를 들어 국기를 만들거나 사람 및 손, 코와 같은 신체 부위를 묘사하는 특정 글리프에서 피부 색상을 변경할 수 있습니다.
EmojiOne Color는 Denis Denz가 디자인하고 Rick Moby가 제작한 EmojiOne 아트워크를 가지고 Adobe에서 만든 오픈 소스 색상 글꼴입니다. 글꼴에는 유니코드 9.0의 모든 이모지가 포함되어 있으며 ZWJ, 다양한 피부 톤 및 국기 이모지에 대한 지원이 포함됩니다.
EmojiOne과 같은 emoji 글꼴의 문자는 키보드의 문자와 완전히 다릅니다. 글리프 패널을 통해, 운영 체제(Charmap(Windows) 및 문자 (macOS))를 통해 또는 emojicopy.com과 같은 온라인 페이지에서 텍스트를 복사하여 삽입할 수 있습니다.
참고:
- 창 > 작업 영역 > 그래픽 및 웹을 선택한 다음 글리프 탭을 클릭하여 글리프 패널을 열 수도 있습니다.
- 최근에 사용한 이모지가 글리프 패널의 맨 위 행에 표시됩니다.
Photoshop에서 EmojiOne 글리프 시퀀스를 삽입하여 다른 글리프를 생성할 수 있습니다. 예를 들면 국기를 만들거나,한 사람 또는 신체 부위의 피부색을 변경할 수 있습니다. (두 명 이상의 이모지에서는 작동하지 않습니다.)
국기 만들기 EmojiOne에서 원으로 표시된 문자(A, B, C, D 등)는 키보드의 키와 일치하지 않습니다. 글리프 패널에서 이러한 문자를 삽입하여 국가의 ISO 코드를 구성하면 이 두 문자가 해당 국가의 국기를 형성합니다. 예를 들어 US는 미국 국기, GB는 영국 국기, AR은 아르헨티나 국기, IN은 인도 국기를 제공합니다. 전체 코드 목록은 ISO 3166-1에 정의되어 있습니다.
캐릭터 변형 만들기 1인 기본 캐릭터 또는 신체 부위를 사용 가능한 5가지 Fitzpatrick 척도 피부색(GID 356 ~ 360) 중 하나와 결합합니다. 원래 기본 캐릭터는 피부색과 일치하는 캐릭터로 대체됩니다. 이러한 합성은 현재 두 명 이상의 사람이 있는 글리프에서 작동하지 않습니다.
참고:
- 기본 1인칭 캐릭터 또는 신체 부위 이모지는 피부색 캐릭터와 한 번만 페어링할 수 있습니다.
- 글리프 시퀀스는 글꼴 기능입니다. 모든 OpenType-SVG 글꼴이 여러 문자를 결합하여 단일 글리프를 형성하는 것은 아닙니다.
CSS를 통해 OpenType-SVG 글꼴 사용
OpenType-SVG 글꼴에는 다른 OpenType 글꼴과 마찬가지로 CSS를 통해 활성화할 수 있는 기능이 포함되어 있습니다. 이러한 기능에 액세스하는 방법에 대한 개요는 OpenType 기능 사용 및 CSS의 OpenType 기능에 대한 구문을 참조하십시오.
예를 들어 Trajan Color Concept의 추가 색상 스타일은 1에서 20까지 번호가 매겨진 스타일 세트라는 이름의 OpenType 기능으로 설정됩니다(ss01, ss02, ss03 등). Trajan Color의 텍스트 세트에 20가지 스타일 중 하나를 적용하려면 font-feature-settings를 사용하여 스타일 세트 중 하나를 적용할 수 있습니다.
.Trajan-gold { font-family: 'Trajan Color Concept';
font-feature-settings: "ss01"; }
.Trajan-silver { font-family: 'Trajan Color Concept';
font-feature-settings: "ss02"; }
OpenType-SVG 글꼴을 지원하지 않는 브라우저에서는 대체 스타일(스타일 세트 20과 동일)이 표시됩니다.
글꼴의 글리프 전체 또는 일부와 관련된 SVG 아트워크가 추가되었기 때문에 일반 OpenType 글꼴보다 파일 크기가 더 클 수 있습니다. 사이트에 OpenType-SVG 웹 글꼴을 추가할 때는 이 점을 유의하십시오.
OpenType-SVG 글꼴을 지원하는 애플리케이션
- Photoshop, 버전 CC 2017 이상
- Illustrator
- Firefox, 버전 32 이상
- Microsoft Edge, Windows 10 Anniversary Edition 이상
- Windows 10에서 DirectWrite 및 Direct2D 플랫폼 구성 요소는 해당 API를 사용하는 모든 앱에서 OpenType-SVG 지원을 허용합니다.
알려진 문제
Illustrator 및 InDesign
Illustrator 또는 InDesign에서 OpenType-SVG 색상 글꼴을 사용할 때 다음 문제가 발생할 수 있습니다.
- PDF 또는 SVG로 내보낸 후 글리프가 잘못된 위치에 나타날 수 있습니다.
- 색상 SVG 글꼴에 방향 전환, 회전 또는 반사 효과를 적용할 때 효과가 손실되거나 문자 윤곽선을 만들 때 문자가 원래 위치에서 멀리 이동할 수 있습니다.
- 텍스트를 세로로 설정하면 내보내기 후 문자 위치가 다르게 나타날 수 있습니다.
- 나선형 경로 배치에 텍스트를 설정할 때 문자가 잘못 배치된 것처럼 보일 수 있습니다.
소프트웨어 팀은 현재 이들 문제를 해결하기 위해 노력하고 있습니다.
기타 리소스
다음은 OpenType-SVG 글꼴 준비 및 작업에 대한 기타 정보 소스에 대한 링크입니다.
- OpenType-SVG 글꼴의 SVG 표에 대한 세부 정보 및 사양:
https://www.microsoft.com/typography/otspec/svg.htm - OpenType-SVG 글꼴을 만들기 위한 도구 및 샘플 파일:
https://github.com/adobe-type-tools/opentype-svg - https://pixelambacht.nl/chromacheck/는 뷰어에게 OpenType-SVG를 포함하여 다양한 색상 글꼴 형식에 대한 브라우저의 지원에 대해 알려 주는 웹 페이지입니다. (소스 코드는 https://github.com/RoelN/ChromaCheck에 있습니다.)
- TypeDrawers 포럼에서 이루어지는 OpenType-SVG 글꼴 준비 및 사용에 대한 활발한 토론: http://typedrawers.com/discussion/comment/19442/
