Tüm favori gradyan renklerinizi içeren kompakt, sıkıştırma dostu, renk vektör yazı tipleri.
Chrome 98'de, Chrome ve Yazı Tipleri ekipleri COLRv0 yazı tipi biçiminin bir geliştirmesi olan COLRv1 için destek ekledi. Gradyan ekleme, birleştirme ve karıştırma yoluyla renk yazı tiplerini yaygınlaştırmak ve iyi sıkıştırılan düz ve kompakt yazı tipi dosyaları için geliştirilmiş dahili şekillerin yeniden kullanımı.
Şimdi renklendir
Web'de metin genellikle CSS'de belirtilen bir renkte çizilir. Yazı tipi belirli bir rengi tanımlamaz, yalnızca piksellerin nereye yerleştirilmesi gerektiğini belirtir. Bu genellikle iyi bir şeydir. CSS, yazarın esnek bir şekilde renk seçebilmesini
sağlar. Ancak bazen bir glif, birlikte anlamlı olan birden çok renk içerir. Örneğin, açık mavi, pembe ve beyaz şeritlere sahip 
bayrağı, sadece mevcut metin rengiyle çizilmişse aynı anlamı taşımaz.
Günümüzde çoğu kullanıcının gördüğü tek renk yazı tipi emoji'dir. Emoji'ler web'de genellikle sistem emoji yazı tipi aracılığıyla veya resim ekleyerek (
) görünür. Özellikle bit eşlem tabanlı renk yazı tiplerinde kullanılan büyük dosya boyutları, emoji için web yazı tiplerini kullanmayı zorlaştırmıştır. COLRv1'i destekleyerek, web'de ve ötesinde
reklam öğesi renkli yazı tipi kullanımının çoğaldığını görmeyi umuyoruz.
Renklerini göster
Oynamanız için birkaç örnek hazırladık:
Örnekte kullanılan Google Fonts'tan örnek öğeler Google Fonts web API'sinde kullanıma sunulmuştur. Bunlar, yalnızca Chrome 98 veya sonraki sürümlerde çalışacakları ve deneysel çalışmaları sergileyecekleri için fonts.google.com adresindeki dizinde listelenmemiştir.
Artık ücretsiz ve açık kaynaklı araçları kullanarak kendi COLRv1 yazı tiplerinizi oluşturabilirsiniz. SVG kaynak resimlerden COLRv1 yazı tipleri oluşturmanıza olanak tanıyan nanoemoji yazı tipi derleyicisine göz atın ve bunları Chrome 98 veya sonraki bir sürümde deneyin. Bu talimatları uygulayarak gradyan renklerini değiştirerek Bungee Spice'a kendi yorumunuzu katmayı deneyin.
Örneğin, Bungee Spice yazı tipini aşağıdaki gibi mavi ve kırmızı bir renk geçişine sahip olacak şekilde değiştirebilirsiniz:
Sonuçlarınızı @googlefonts'a tweet olarak gönderin 🙂 Dairesel veya genişlem gradyanı kullanmaya ne dersiniz?
COLRv1 ile yeni
Yazı tipi biçimi, her birinin farklı artıları olan, rengi desteklemek için çeşitli yöntemleri desteklemektedir, ancak hiçbiri web'de şu ana kadar başarılı olamamıştır. (Bu dengeler hakkında daha fazla bilgi edinmek için Dominik'in BlinkOn 15 konferansı konuşmasına göz atın.) Chrome 98, COLRv0'ın gelişmiş hali olan COLRv1'i destekler. COLRv1'in grafik özellikleri ve kompakt dosya kombinasyonunun onu birçok renk yazı tipi kullanım durumu için iyi bir seçim haline getireceğini umuyoruz. COLRv1, gradyanlar, birleştirme ve harmanlama ekler ve daha da kompakt dosyalar oluşturmak için dahili şekillerin yeniden kullanımını iyileştirir.
COLRv1, hemen hemen SVG Yerel'e eşdeğer olan ifade yeteneğine ve buna eklenen harmanlama ve birleştirme özelliğine sahiptir. Dört tür dolgusu vardır: düz renkler, doğrusal gradyanlar, dairesel renk geçişleri ve süpür/konik gradyanlar. COLRv1, tam bir çeviri, döndürme, şeffaf ve ölçek dönüşümü grubunu kullanarak glif öğelerini yeniden konumlandırmanıza ve dönüştürmenize olanak tanır. Ayrıca, yazı tipi varyasyonlarını destekler ve yazı tipindeki mevcut şekil tanımı biçimlerini yeniden kullanır.
Örneğin, kristal küre emojisini düşünün: Yıldız şeklindeki vurgular aynı şekle sahiptir ancak farklı boyutlara sahiptir. Yani yalnızca bir şeklin dosya içinde tekrarlanmadan yeniden konumlandırılabileceği ve tekrar kullanılabileceği anlamına gelir. Bu biçim, her bir glif için aynı şekilleri tekrar tekrar kodlamak zorunda kalmadan, bir glifin tamamını yeni bir glifte yeniden kullanmanızı sağlar. Çiçek süslemeleri içeren dekoratif bir renk yazı tipi düşünün. Bu yazı tipinde, aynı çiçek şekilleri yalnızca mevcut renk gliflerine atıfta bulunarak farklı harflere yerleştirilir. Web yazı tipi kullanım alanında, COLRv1, woff2'nin altında iyi bir şekilde sıkıştırır. Örneğin, COLRv1 kullanan bir Twemoji test derlemesi, yaklaşık 1,2 MB şişirilmiş süreyken woff2 biçiminde yaklaşık 0,6 MB'tır. Eksiksiz Noto Emoji Glyph grubunun derlemesi, bit eşlem sürümü için 9 MB'tan COLRv1+woff2 biçiminde 1,85 MB'a düşürüldü.
Renk yazı tipinin kullanım alanları
İlgi çekici başlıklar
Yeni bir renk yazı tipi sayesinde görsel vurgular, başlıklar ve banner'lar öne çıkıyor.
Artık resimlerin değiştirilmesine gerek yok: emoji yazı tipleri
Kullanıcı tarafından oluşturulan içerikleri destekliyorsanız kullanıcılarınız muhtemelen emoji kullanır. Platformlar arası tutarlı bir oluşturma işlemi gerçekleştirmek ve işletim sisteminin desteklediğinden daha yeni emojileri destekleyebilmek için metin tarayıp karşılaşılan emojileri resimlerle değiştirmek günümüzde yaygın bir uygulamadır. Daha sonra pano işlemleri sırasında bu resimlerin tekrar metne dönüştürülmesi gerekir. Gerçek bir örnek:
Emoji yazı tipiniz varsa metni şu şekilde oluşturun:
<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>
Benzer şekilde, bir emoji tepki bileşeninde COLRv1, resim öğeleri kataloğu yerine kompakt bir yazı tipi dosyası kullanma fırsatı sunar.
Eksiksiz bir emoji seçici için kaç resim getirmeniz gerektiğini düşünün.
Simge yazı tiplerinde renk
Simge yazı tiplerinde renk kullanımı daha net bir görünüm sağlar ve karakterlerin daha kolay anlaşılmasını sağlar.
Sanatsal ifade
Alandan tasarruf sağlayan renk yazı tipleri, web'deki metinde yeni sanatsal ifade biçimlerine olanak tanır. Kufi stili Arapça yazı tipi örneğinde, geleneksel kaligrafinin mürekkep akışının Kufi stili Arapçada ucu ve mürekkeple yazılmayıp taşa oyulmuş olarak uygulandığında nasıl görünebileceğine dair sanatsal bir yorum olarak renk gradyanları kullanılıyor.
Özellik algılama
Şu anda, bir tarayıcı motorunun belirli bir renk yazı tipi biçimini destekleyip desteklemediğini belirlemek için kullanıcı aracısı yoklama yöntemini kullanabilir veya Canvas'ta renk gliflerinin oluşturulmasını test etmek için @PixelAmbacht tarafından ChromaCheck gibi bir kitaplıkta arama yapabilirsiniz. Her iki çözüm de optimum değildir. Özellik testleri yalnızca belirli bir özelliğin kendisini algılamalı ve kullanıcı aracısını yoklamaktan kaçınmalıdır. ChromaCheck kitaplığının desteği belirlemek için yoğun kaynak kullanan 2D tuval işlemleri gerçekleştirmesi gerekmemelidir.
Chrome ekibi bu özelliği iyileştirmek istiyor ve hem JavaScript'te hem de bildirimli şekilde CSS'de tarayıcı yazı tipi teknolojisi desteği hakkında bilgi sağlamak için CSS çalışma grubunda bir dizi tartışma [1, 2] başlattı. Ekip, Chrome'un gelecekteki bir sürümünde renk yazı tipi ve diğer yazı tipi teknolojilerine yönelik etkili özellik algılamayı kullanıma sunmayı planlıyor.
Şu anda projenizde COLRv1 desteği Chrome ile sınırlıyken şu anda bunu iki şekilde yapabilirsiniz: Yazı tipi tedarikçinizden tek renkli glifler içeren bir COLRv1 yazı tipi isteyin. COLRv1'i desteklemeyen kullanıcı aracıları, tek renkli glifler oluşturmaya başlar. Alternatif olarak, COLRv1 desteğinin olup olmadığını belirlemek için ChromaCheck kitaplığını veya kullanıcı aracısı yoklama işlevini kullanabilirsiniz. Daha sonra, destekleyici kullanıcı aracılarında COLRv1 yazı tiplerini yükleyen ve diğer tarayıcılarda COLRv0, bit eşlem yazı tipi biçimi veya OpenType SVG gibi alternatif bir yazı tipi biçimi kullanan CSS'yi iletiyorsunuz.
CSS yazı tipi paleti desteği
Bu özellik, farklı bir renk grubu kullanmak yeni bir yazı tipi gerektirmeyecekse çok faydalı olur. Neyse ki, bir mekanizma var: font-palette CSS özelliği. Chrome ekibi, Chrome'da yazı tipi paleti desteği eklemek için çalışıyor.
COLRv1 yazı tipleri ve siz
COLRv1 yazı tipleri ilginizi çekerse yazı tipi tedarikçi firmanızdan projenizde kullanılacak bir COLRv1 renk yazı tipini isteyin. Yukarıdaki örnekleri ve demoları deneyin. İsterseniz doğrudan içine girip kendi yazı tipinizi oluşturmayı da denemeye ne dersiniz?
Chrome'daki COLRv1 ile ilgili geri bildiriminiz varsa blink-dev posta listesinde yayınlayın veya sorun izleyicimizde sorun bildiriminde bulunun. COLRv1 yazı tipi biçimiyle ilgili geri bildirimde bulunmak istiyorsanız COLRv1 spesifikasyonu GitHub deposunda sorun bildirin.
Chrome 98'de COLRv1'in web'e tamamen yeni bir tipografik yaratıcılık seviyesi getirmesi bizi heyecanlandırıyor.
Daha fazla bilgi
Daha fazla bilgi edinmek isterseniz aşağıdaki birkaç kaynağımızı inceleyebilirsiniz:
COLRv1'in nasıl çalıştığını ve Chrome'da nasıl uygulandığını öğrenmek için Dominik'in BlinkOn 15 konferans konuşmasına göz atın.
- Uluslararası Unicode Konferansı No. 45: Vector Color Fonts, Roderick Sheeter, Peter Constable ve Dominik Röttsches (video, konuşma ayrıntıları)
- nanoemoji yazı tipi derleyici, SVG resimlerinden COLRv1 yazı tipleri oluşturur.
- Mevcut Noto Emoji, Twemoji ve diğer örnek yazı tiplerini içeren Google Fonts color-fonts GitHub deposu
- DJR'nin COLRv1'i keşfeden Bradley Baş harfleri yazı tipini kullanması
- Mevcut renk yazı tipi teknolojilerinin özelliklerini algılamak için ChromaCheck aracı ve kitaplığı
Teşekkür
Katkıları için Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel COLSkens1'e ve Roel Nieskens'e çok teşekkür ederiz.