컴팩트하고 압축하기 쉬운 컬러 벡터 글꼴로 즐겨 사용하는 글꼴이 모두 제공됩니다. 있습니다
Chrome 98에서 Chrome 팀과 글꼴 팀은 COLRv0 글꼴 형식을 발전시켰는데, 이는 2016년 1분기부터 2014년까지 그라데이션 추가, 합성 및 블렌딩, 내부 도형 재사용 개선 를 사용합니다.
지금 색상 지정하기
웹에서 텍스트는 일반적으로 CSS에 지정된 색상으로 그려집니다. 글꼴의 기능은
특정 색상을 정의하지 않고 픽셀이 위치해야 하는 위치만 나타냅니다.
있습니다. 그것은 일반적으로 좋은 일입니다. CSS를 사용하면 작성자가
color[색상] 그러나 때로는 글리프가 함께 붙어 있는
알 수 있습니다. 예를 들어 하늘색, 분홍색, 흰색 줄무늬가 있는 
플래그는 유효하지 않습니다.
은 단순히 현재 텍스트 색상으로 그려진 경우 동일한 의미를 전달합니다.
오늘날 대부분의 사용자에게는 그림 이모티콘만 표시되는 색상 글꼴입니다. 그림 이모티콘
일반적으로 시스템 이모티콘 글꼴을 통해 또는 이미지를 삽입하여 웹에 표시됩니다.
(자체 정보 표시, 
가 있음) 대용량 파일
크기, 특히 비트맵 기반 색상 글꼴의 경우
있습니다. COLRv1을 지원함으로써
사용할 수 있습니다.
당신의 색깔을 보여주세요
다음은 몇 가지 예입니다.
이 예에서 사용된 Google Fonts의 예시 애셋은 Google Fonts 웹 API 그들은 fonts.google.com의 디렉터리에 Chrome 98 이상에서만 작동하며 실험적인 기능을 선보입니다.
이제 무료 오픈소스 도구를 사용하여 COLRv1 글꼴을 만들 수 있습니다. 확인 nanoemoji 글꼴 컴파일러를 사용해 보세요. 이를 사용하면 SVG 소스 이미지에서 COLRv1 글꼴을 빌드하여 Chrome 98 이상 이미지를 변경하여 Bungee Spice를 나만의 방식으로 재해석해 보세요 그라데이션 색상을 이 안내를 따르세요.
예를 들어 Bungee Spice 글꼴을 다음과 같이 파란색과 빨간색 그라데이션으로 수정할 수 있습니다.
@googlefonts로 결과를 트윗하세요. 상 방사형 또는 스윕 그라데이션을 사용해 보세요.
COLRv1의 새로운 기능
글꼴 형식은 색상을 지원하는 다양한 방법을 지원하며 하지만 지금까지 웹에서는 이러한 장단점이 있었습니다. (자세한 내용은 장단점을 알아보려면 도미니크의 BlinkOn 15 컨퍼런스 토크를 살펴보세요.) Chrome 98은 COLRv0의 진화한 기능인 COLRv1을 지원합니다. 희망 COLRv1은 그래픽 기능과 컴팩트 파일을 결합하여 다양한 색상 글꼴 사용 사례에 적합합니다. COLRv1은 그라데이션을 추가합니다. 합성 및 블렌딩을 지원하며, 내부 도형 재사용을 사용하여 파일을 더 압축할 수 있습니다.
COLRv1의 표현 능력은 SVG 네이티브 플러스 블렌딩 및 합성 기능이 있습니다. 색상 채우기에는 단색, 선형 그래디언트, 방사형의 네 가지 유형이 있습니다. 스윕/원뿔 그라데이션이 있습니다. COLRv1을 사용하면 위치를 변경하고 변환할 수 있습니다. 변환, 회전, 가리기, 배율 전체 세트를 사용하는 글리프 요소 사용할 수 있습니다 글꼴 변형 및 재사용도 지원합니다. 글꼴의 기존 도형 정의 형식을 나타냅니다.
수정 구슬 이모티콘을 예로 들어 보겠습니다. 별 모양의 하이라이트는 즉, 하나의 도형만 다른 셀로 작업할 수 있다는 것을 파일 내에서 중복 없이 재배치되고 재사용됨. 이 형식을 사용하면 새 글리프 안에 전체 글리프를 재사용할 수 있으므로 각 글리프에 대해 동일한 도형을 인코딩합니다. 색깔이 진한 꽃장식: 같은 꽃 모양이 여러 글자 위에 놓임 색상 글리프를 참조할 수도 있습니다. 웹 글꼴 사용 사례의 경우 COLRv1입니다. woff2에서 잘 압축됩니다. 예를 들어 COLRv1을 사용하는 Twemoji 테스트 빌드 1.2MB가 부풀려져 있지만 woff2 형식으로는 약 0.6MB입니다. 빌드는 전체 Noto 그림 이모티콘 Glyph 세트가 비트맵 버전의 9MB에서 1.85MB로 줄었습니다. COLRv1+woff2 형식으로 표시됩니다.
<ph type="x-smartling-placeholder">
색상 글꼴 사용 사례
눈길을 끄는 헤드라인
참신한 색상의 글꼴로 하이라이트, 광고 제목, 배너가 눈에 확 들어옵니다. 있습니다.
더 이상 이미지를 대체하지 않음: 이모티콘 글꼴
사용자 제작 콘텐츠를 지원하는 경우 사용자는 이모티콘을 사용할 것입니다. 현재 텍스트를 스캔하여 이미지에 표시되는 이모티콘을 대체하여 일관적인 교차 플랫폼 렌더링 및 최신 지원 플랫폼 지원 등 이모티콘을 더 많이 사용합니다. 그런 다음 이미지를 텍스트로 다시 전환해야 알림을 받습니다. 다음은 실제 예입니다.
<ph type="x-smartling-placeholder">
그림 이모티콘 글꼴이 있는 경우 다음과 같이 글꼴로 텍스트를 렌더링합니다.
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
마찬가지로 이모티콘 반응 구성요소에서 COLRv1은 이미지 애셋의 카탈로그 대신 축약된 글꼴 파일을 사용합니다.
완전한 그림 이모티콘 선택 도구를 만들려면 얼마나 많은 이미지를 가져와야 하는지 상상해 보세요.
아이콘 글꼴의 색상
아이콘 글꼴에 색상을 사용하면 선명도가 높아지고 글리프를 더 쉽게 이해할 수 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">예술적 표현
공간 효율적인 색상 글꼴로 텍스트에 새로운 형태의 예술적 표현이 가능합니다. 있습니다. 이 쿠피 스타일 아랍어 글꼴의 예는 전통적인 서예의 잉크 흐름에 대한 예술적 해석 아랍어 문자의 쿠피 스타일을 적용했을 때 펜과 잉크로 쓰지 않고 돌을 새겨 넣는 것입니다.
특성 감지
현재 브라우저 엔진이 특정 색상을 지원하는지 여부를 확인하는 작업은 사용자 에이전트 스니핑 또는 ChromaCheck 등의 라이브러리를 색상 렌더링을 테스트하는 @PixelAmbacht 그림을 그릴 수 있습니다. 두 솔루션 모두 최적은 아닙니다. 특성 테스트는 사용자 에이전트 스니핑을 피해야 합니다 크로마체크 더 이상 리소스를 사용하지 않는 2D 캔버스 작업을 수행할 필요가 있습니다.
Chrome팀은 이를 개선하기 위해 일련의 토론을 시작했습니다. [1, 2]. 자바스크립트와 글꼴의 브라우저 글꼴 기술 지원에 대한 정보를 CSS에서 선언적으로 생성됩니다. 팀은 효율적인 특성 감지를 출시하여 색상 글꼴 및 기타 글꼴 기술을 조정할 수 있습니다.
COLRv1을 사용할 때 지금 바로 프로젝트에서 색상 글꼴을 사용하려는 경우 Chrome만 지원을 받을 수 있습니다. 두 가지 방법을 사용할 수 있습니다. 단색 글리프도 포함된 COLRv1 글꼴을 제공하는 업체입니다. 사용자 에이전트 COLRv1을 지원하지 않는 경우 흑백 렌더링으로 대체됩니다. 사용합니다. 또는 ChromaCheck 라이브러리 또는 사용자 에이전트를 사용할 수 있습니다. 스니핑을 사용하여 COLRv1 지원을 사용할 수 있는지 확인합니다. 그런 다음 CSS를 제공하고 는 사용자 에이전트 지원을 위해 COLRv1 글꼴을 로드하고 대체 글꼴을 사용하는 COLRv0, 비트맵 글꼴 형식 또는 다른 브라우저의 OpenType SVG 형식을 사용합니다.
CSS 글꼴 팔레트 지원
다른 색상 세트를 사용해도 별 문제가 없는 경우 매우 유용합니다. 새로운 글꼴이 필요합니다. 다행히 다음과 같은 메커니즘이 있습니다. font-palette CSS 속성입니다. 이 Chrome팀에서는 Chrome에서 font-palette 지원이 포함됩니다.
COLRv1 글꼴 및 나
COLRv1 글꼴이 마음에 들면 글꼴 공급업체에 COLRv1 색상에 관해 문의하세요. 예시 및 데모를 사용해 보세요. 바로 시작해 보셔도 좋습니다. 직접 제작하고 싶다면
Chrome의 COLRv1에 대한 의견이 있는 경우 blink-dev 메일링 리스트 Issue Tracker에서 문제를 제출하세요. 의견이 있는 경우 에 대한 문제를 제기하려면 COLRv1 사양 GitHub 저장소
Chrome 98을 통해 COLRv1이 어떻게 완전히 새로운 차원의 웹에 활자 창작을 선보일 수 있습니다.
자세히 알아보기
더 자세한 내용을 알고 싶으시다면 다음 자료를 참고하세요.
COLRv1의 작동 방식과 Chrome에서 구현된 방법을 알아보려면 Dominik의 BlinkOn 15 컨퍼런스 토크를 확인하세요.
- 국제 유니코드 컨퍼런스 #45: 벡터 색상 글꼴, Roderick 제공 Sheeter, Peter Constable, Dominik Röttsches (동영상, 대화 세부정보)
- 나노 이모티콘 글꼴 컴파일러로, SVG 이미지의 COLRv1 글꼴
- Google 글꼴 color-fonts GitHub 저장소 Noto 그림 이모티콘, Twemoji 및 기타 샘플 글꼴의 현재 빌드가 포함되어 있습니다.
- DJR이 COLRv1을 살펴보는 Bradley Initials 글꼴 쇼케이스
- ChromaCheck 도구 및 라이브러리를 사용하여 사용 가능한 색상 글꼴 기술 기능 감지
감사의 말씀
베흐다드 에스파보드, 코시모 루포, 피터 콘스터블, 벤 바그너, 베르너에게 감사의 인사를 전합니다. 렘버그, 데이브 크로스랜드, 블라디미르 레반토프스키, 조나단 큐, 로렌스 페니 Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens, COLRv1에 기여해 왔습니다.