COLRV1 및 CSS FONT-PALETTE

Arcade Game Typography의 저자 인 Toshi Omagari에 따르면, 세계 최초의 멀티 컬러 디지털 글꼴은 1982 년 Insector라는 결코 출시되지 않은 비디오 게임을 위해 만들어졌습니다. Colr Font Format이 2018 년 이후 (Internet Explorer에서도) 전체 크로스 브라우저 지원을 받았음에도 불구하고, 때때로 색채 유형이라고도 불리는 멀티 컬러 글꼴은 여전히 ​​웹에서 비교적 드 rare니다.

이 기술은 완전히 새로운 시력의 정맥을 열어줍니다. 내가 본 컬러 글꼴 중 일부는 끔찍한 반면, 반란 색 폰트는 재미 있고 혁신적이며 관심을 끌고 있습니다. 컬러 글꼴의 색상 팔레트와 Colr 글꼴 형식의 진화를 제어하기 위해 Font-Palette 속성 및 @font-palette-values ​​규칙을 포함한 새로운 CSS 기능을 모두 추가하면 현대 웹 타이포그래피가 수행 할 수있는 일을 다이빙하고 실험 할 수있는 좋은 시간입니다.

Colr 지원

나는 2018 년에 컬러 글꼴에 대해 마지막으로 썼습니다. 당시에는 OpenType-SVG, Colr, SBIX 및 CBDT/CBLC의 여러 가지 표준에 대한 네 가지 표준이있었습니다. Chromacheck을 사용하여 자신의 브라우저가 지원하는 Color Font 형식을 확인할 수 있습니다.

Google Chrome은 OpenType-SVG를 "WontFix"로 표시했습니다. 즉, 형식은 Chrome 또는 Edge에서 결코 지원되지 않습니다. SBIX 및 CBDT/CBLC는 래스터 이미지를 기반으로하고 더 큰 글꼴 크기로 흐리게되므로 웹에서 사용하기 위해 대부분 무시할 수 있습니다. 비트 맵 기반 글꼴의 큰 파일 크기는 또한 웹에 나쁜 선택이됩니다.

Ulrike Rausch는 Bitmap 컬러 글꼴 인 Liebeheide의 제작자입니다. “나의 가장 큰 목표는 항상 필기 된 텍스트를 가능한 한 정통하게 재현하는 것이 었습니다.”라고 그녀는 말했습니다. “Liebeheide의 경우 마침내이 수제 속성을 글꼴로 시뮬레이션 할 수있었습니다. 단점? 글꼴 파일의 모든 PNG 이미지가 추가되어 엄청난 OTF 파일 크기가 발생합니다. Adobe Indesign과 같은 데스크탑 응용 프로그램에는 문제가되지 않을 수 있지만 웹에서 사용하기 위해서는 글꼴을 거의 적용 할 수 없습니다.”

모든 브라우저는 Colr Fonts (현재 일반적으로 COLRV0이라고 함)를 지원합니다. 2 월에 출시 된 Chrome (및 Edge)의 버전 98은 형식의 진화 인 Colrv1에 대한 지원을 추가했습니다.

이 브라우저 지원 데이터는 Caniuse의 것입니다. 숫자는 브라우저가 해당 버전에서 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일 / 태블릿

COLRV0 및 COLRV1

Colrv1은 OpenType 1.9 표준의 일부입니다. 초기 COLRV0에는 OpenType-SVG의 창의적인 가능성이 많았지 만 Colrv1은 특정 단점을 피하면서 이러한 가능성과 일치합니다. 예를 들어 Colrv0은 단색 만 수행 할 수 있지만 Colrv1은 선형, 방사형 및 원뿔 구배를 수행 할 수 있습니다. 이 형식은 또한 복합 및 혼합을 추가하고 파일 크기를 저장할 수 있도록 모양 재사용이 가능합니다.

타이포그래피 전문가 Roel Nieskins는 다음과 같이 설명합니다.“OpenType-SVG 형식이 가장 다양성을 제공했기 때문에 OpenType-SVG 형식이 가장 좋은 형식이라고 말했습니다. 텍스트 렌더링과 같은 저수준 작업에 비해 너무 복잡하다는 것을 깨달을 때까지. 글꼴 렌더링 레벨에서 SVG의 기본 하위 집합을 구현합니다. 그러나 다른 글꼴 기술 (힌트, 가변 축 등)과 잘 어울리지 않으며 구현하기가 고통 스럽습니다. 그래서 나는면을 Colr로 바꿨다. Colr는 기본적으로 OpenType 글꼴이 이미 가지고있는 모든 것을 재사용합니다. '만'만이 레이어링을 추가하고 각 레이어의 색상을 변경할 수 있습니다. 간단하지만 효과적입니다.”

Colrv1은 가변 글꼴 축과 전적으로 호환되며 이미 Merit 배지, Plakato 색상 및 Rocher 색상과 같은 가변 Colr 글꼴의 예가 이미 있습니다.

다음은 Ulrike Rausch의 Format에서 가능한 What 's Pasion, A (현재 미개발) 서체의 놀라운 예입니다.

Foundry Underware의 Akiem Helmling은 Colrv1에 매료되어“COLRV1 형식은 최근 몇 년 동안 가변 글꼴과 유형 디자인에 비슷한 (또는 더 큰) 영향을 미칠 수 있습니다.” Akiem의 경우 의심 할 여지없이 우수한 형식입니다. “이전의 모든 색상 형식은 글리프에 색상을 추가하기 위해 나쁜 해킹이었습니다. OpenType-SVG는 일부 사람들에 의해 좋은 솔루션으로 간주되지만, 내 관점에서 볼 때 전혀 아닙니다. 실용적인 관점에서 SVG는 OpenType의 개방 구조 내에서 '잠긴 방'입니다. 데이터를 재사용하거나 링크하거나 다른 글꼴 테이블과 SVG 테이블 사이를 연결하는 방법은 없습니다. 이로 인해 변수 SVG 데이터로 가변 글꼴을 만들 수 없습니다.”

형식의 초기에는 여전히 초기입니다. Mozilla는 아직 Colrv1을 배송하지 않았지만 형식에서 긍정적 인 위치를 차지했습니다.“웹 사용에서 OpenType-SVG 글꼴을 대체 할 가능성이 있습니다. 애플은 사파리에서 구현하기를 꺼려한다.

Colrv1 글꼴은이 브라우저에서 여전히 표시되어 읽을 수 있지만 모든 문자는 단일 단색입니다 (일반 글꼴과 마찬가지로 CSS 색상 속성으로 설정할 수 있음). 우리는 아직 많은 유형의 파운드리가 Colrv1 서체를 출시하는 것을 보지 못했고 Figma와 같은 인기있는 디자인 도구는 Colrv0조차 지원하지 않지만 웹에서 컬러 타이포그래피의 미래가 될 것이라고 믿습니다. 짧은 시간에 Colrv1은 이미 Reem Kufi 및 Bradley 이니셜과 같이 기술이 할 수있는 일에 대한 아름다운 예가 이미있었습니다.

Colr 및 CSS

컬러 글꼴을 사용하는 경우 색상을 제어 할 수있을 것입니다. 지금까지는 CSS와 관련이 없었습니다. Font-Palette 속성은 서체의 기본 색 구성표를 무시하고 직접 적용 할 수있는 전력을 제공합니다. 이 속성은 Colrv0 및 Colrv1 서체에서 작동합니다. (Apple의 Myles Maxfield는 SVG 글꼴이 팔레트를 사용하는 데 선택할 수있는 반면 Colr 서체의 모든 색상은 CSS에 의해 자동으로 재정의됩니다.)

괜찮은 컬러 팔레트를 생각해내는 것은 미술입니다. 일부 유형의 디자이너는 우리를 위해 노력했으며 글꼴 내부에 대체 팔레트를 포함 시켰습니다. CSS에서 기본 팔레트를 사용하여 이러한 다양한 색 구성표를 선택할 수 있습니다.

글꼴이 대체 팔레트를 제공하는지 어떻게 알 수 있습니까? 글꼴 사이트가 알려줄 수 있습니다. 그렇지 않은 경우 와카 마이 퐁듀 (Wakamai Fondue)라는 편리한 도구가있어 사용 가능한 모든 색 구성표 (아래 이미지에 표시)를 나열합니다. 이 예에서는 Flintstones 분위기와 함께 Henrique Beier의 무료 가변 색상 글꼴 인 Rocher Color를 사용하겠습니다. Wakamai Foundue를 살펴보면이 서체가 네 가지 색상을 사용하고 11 개의 다른 팔레트 옵션이 제공된다는 것을 알 수 있습니다.

기본 팔레트 사용 : 0은 기본 색상 팔레트를 선택합니다 (Rocher의 경우 오렌지색과 갈색의 음영).

Base-Palette 사용 : 1은 서체 제작자에 의해 정의 된 첫 번째 대체 팔레트를 선택합니다. 다음 코드 예제에서는 회색의 다른 색조 인 색상 팔레트를 선택하고 있습니다.

 @font-palette-values ​​--grays {
  유대 가족 : Rocher;
  베이스 팔레트 : 9;
}

CSS @font-palette-values ​​규칙이있는 팔레트를 선택한 후에는 Font-Palette 속성을 사용하여 적용 할 수 있습니다.

 .grays {
  유대 가족 : '로셔';
  글꼴 팔레트 :-그레이;
}

물론, 브랜드 색상과 일치하거나 자신의 디자인 감성을 충족시키기 위해 자신의 팔레트를 만들고 싶을 수도 있습니다. 모든 색상을 무시하려면베이스 팔레트를 지정할 필요가 없습니다.

선구자 유형의 디자이너 David Jonathan Ross의 Bungee를 예로 들어 봅시다. 기본적으로 빨간색과 흰색으로 만 두 가지 색상 만 사용합니다. 다음 예에서는 글꼴의 두 가지 색상을 무시하고 있으므로 기본 팔레트는 중요하지 않으며 생략됩니다.

 @font-palette-values--pinkandgray {
  Font-Family : Bungee;
  오버라이드 컬러 :
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values ​​--grayandpink {
  Font-Family : Bungee;
  오버라이드 컬러 :
    0 #ff3a92,
    1 #c1cbed;
}

또는베이스 팔레트를 시작점으로 설정하고 일부 색상 만 선택적으로 변경할 수 있습니다. 아래는 Rocher의 회색 색상 팔레트를 사용하고 있지만 Minty Green으로 하나의 색상을 무시하고 있습니다.

 @font-palette-values ​​--graysremix {
  유대 가족 : Rocher;
  베이스 팔레트 : 9;
  오버라이드 컬러 : 
    2 RGB (90,290,210);
}

몸 {
  유대 가족 : "Rocher";
  font-palette : --graysremix;
}

오버라이드 컬러를 지정할 때 어떤 숫자가 어떤 숫자로 재정의 될지 알기가 어렵습니다. 시행 착오를 통해 원하는 효과를 실험하고 실험하고 실험해야합니다.

원하는 경우 Twemoji (아래 표시) 또는 Noto와 같은 이모티콘 글꼴의 색상을 변경할 수도 있습니다. Google의 글꼴 엔지니어의 재미있는 데모는 다음과 같습니다.

현재 제한

유감스럽게도 한 가지 제한은 적어도 당분간 CSS 사용자 정의 속성이 @font-palette-values에서 작동하지 않는다는 것입니다. 즉, 다음은 유효하지 않음을 의미합니다.

 @font-palette-values--pinkandblue {
  Font-Family : Bungee;
  오버라이드 컬러 :
    0 var (-분홍색),
    1 var (-파란색);
}

또 다른 한계 : 한 글꼴 팔레트에서 다른 글꼴 팔레트로의 애니메이션과 전환은 보간되지 않습니다. 즉, 한 팔레트에서 다른 팔레트로 즉시 전환 할 수 있지만 점차적으로 애니메이션 할 수는 없습니다. 끔찍한 애니메이션 이모티콘 글꼴에 대한 나의 꿈은 슬프게도 실현되지 않습니다.

브라우저 지원

Font-Palette 및 @Font-Palette-values는 버전 15.4 이후 Safari에서 지원되었으며 버전 101의 출시와 함께 Chrome and Edge에 착륙했습니다.

이 브라우저 지원 데이터는 Caniuse의 것입니다. 숫자는 브라우저가 해당 버전에서 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일 / 태블릿

사용 사례

자신의 프로젝트에서 컬러 글꼴을 어떻게 사용할 수 있는지 이미 상상할 수 있습니다. 그러나 몇 가지 구체적인 사용 사례가 있습니다.

콜러와 아이콘 글꼴

아이콘 글꼴은 더 ​​이상 웹에 아이콘을 표시하는 가장 인기있는 방법이 아닐 수도 있지만 (Chris는 이유를 설명) 여전히 널리 사용됩니다. Fontawesome의 Duotone 또는 Material Design의 2 톤 아이콘과 같은 여러 색상의 아이콘 글꼴을 사용하는 경우 Font-Palette는 더 쉬운 사용자 정의 방법을 제공 할 수 있습니다.

이모티콘 문제 해결

놀란 로슨 (Nolan Lawson)은 최근 웹에서 이모티콘을 사용하는 문제에 대해 썼습니다. Chrome Developer Blog는 다소 복잡한 최신 솔루션을 설명합니다.

사용자 생성 컨텐츠를 지원하면 사용자가 이모티콘을 사용할 수 있습니다. 오늘날에는 텍스트를 스캔하고 이미지로 직면 한 이모티콘을 대체하여 일관된 크로스 플랫폼 렌더링과 OS 지원보다 새로운 이모티콘을 지원할 수있는 능력을 보장하는 것이 일반적입니다. 그런 다음 해당 이미지는 클립 보드 작업 중에 텍스트로 다시 전환해야합니다.

더 큰 브라우저 지원을 받으면 Colrv1 이모티콘 글꼴은 훨씬 간단한 접근 방식을 제공합니다. COLRV1은 또한 모든 크기의 선명하게 보이는 이점을 제공하는 반면, 기본 브라우저 이모지는 더 큰 글꼴 크기로 흐릿하고 픽셀 화됩니다.

마무리

컬러 글꼴 전에 웹의 타이포그래피 창의성은 CSS와 함께 뇌졸중 또는 그라디언트 채우기를 적용하는 것으로 제한되었습니다. 벡터 이미지로 항상 더 사용자 정의를 수행 할 수 있지만 실제 텍스트는 아닙니다. 사용자가 선택할 수없고 클립 보드에 복사 할 수 없으며 명령 F 로 페이지에서 검색 할 수 없으며 화면 리더 또는 검색 엔진이 읽을 수 없으며 사본을 편집하기 위해 Adobe Illustrator를 열어야합니다.

컬러 글꼴은 실제로 사용자의 관심을 끌 수 있으므로 페이지와 배너를 착륙하는 데 적합합니다. 그들은 당신이 자주 도달하는 것이 아닐 수도 있지만, 웹 디자인에 대한 새로운 표현적이고 창의적인 가능성을 약속하여 사이트를 돋보이게 할 수 있습니다.

위 내용은 COLRV1 및 CSS FONT-PALETTE의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!