Tüm favori degrade renklerinizi içeren kompakt, sıkıştırmaya uygun, renkli vektör yazı tipleri.
Chrome 98'de Chrome ve Fonts ekipleri COLRv1 için destek ekledi. COLRv0 yazı tipi biçimi; renk geçişleri ekleyerek, birleştirerek ve karıştırarak renk yazı tiplerini yaygınlaştırmayı amaçlıyor. Ayrıca, iyi sıkıştırılan net ve kompakt yazı tipi dosyaları için iyileştirilmiş dahili şekli yeniden kullanmayı amaçlıyor.
Şimdi renklendir
Web'de metin genellikle CSS'de belirtilen bir renkte çizilir. Yazı tipi belirli bir rengi tanımlamaz, yalnızca piksellerin nereye yerleştirileceğini belirtir. Bu genellikle iyi bir şeydir. CSS, yazarın renk seçmesini kolaylaştırır. Ancak bazen bir glif, birlikte anlamlı olan birden çok renk içerir. Örneğin açık mavi, pembe ve beyaz çizgili bu bayrak (
) sadece geçerli metin rengiyle çizilse bile aynı anlamı taşımaz.
Günümüzde çoğu kullanıcı, renkli yazı tiplerini yalnızca emojilerde görmektedir. Emojiler genellikle web'de sistem emoji yazı tipi aracılığıyla veya resim ekleyerek (
kendi komplikasyonlarına sahiptir) gösterilir. Özellikle bitmap tabanlı renkli yazı tipleri için büyük dosya boyutları, emojiler için web yazı tiplerinin kullanılmasını zorlaştırmıştır. COLRv1'i destekleyerek web'de ve diğer platformlarda yaratıcı renkli yazı tiplerinin kullanımını yaygınlaştırmayı umuyoruz.
Renklerinizi gösterin
Denemenize yönelik birkaç örnek oluşturduk:
Örnekte kullanılan Google Fonts'taki örnek öğeler Google Fonts web API'sinde yayındadır. Yalnızca Chrome 98 veya sonraki sürümlerde çalışacak ve deneysel çalışmaları sergileyeceği için fonts.google.com adresindeki dizinde listelenmez.
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. Daha sonra bunları Chrome 98 veya sonraki sürümlerde deneyin. Bu talimatları uygulayarak degrade renklerini değiştirerek Bungee Spice'a kendi yorumunuzu getirmeyi deneyin.
Örneğin, Bungee Spice yazı tipini mavi ve kırmızı degrade olacak şekilde değiştirebilirsiniz:
Sonuçlarınızı @googlefonts hesabına tweetleyin 🙂 Dairesel veya sarmaşık renk geçişini deneyebilirsiniz.
COLRv1 ile yeni
Yazı tipi biçimi, rengi desteklemek için kullanılan birden fazla yöntemi destekler. Bu yöntemlerin her biri farklı travmalara sahiptir. Ancak şu ana kadar bunların hiçbiri web'de başarılı olmamıştır. (Karşılaştırmalar hakkında daha fazla bilgi edinmek için Dominik'in BlinkOn 15 konferans konuşmasına göz atın.) Chrome 98, COLRv0'un gelişmiş hali olan COLRv1 için destek sunar. COLRv1'in grafik özellikleri ve kompakt dosyalarının bir arada kullanılmasının, birçok renkli yazı tipi kullanım alanı için iyi bir seçim olmasını umuyoruz. COLRv1, degradeler, kompozisyon ve karışım ekler ve daha da kompakt dosyalar oluşturmak için dahili şekil yeniden kullanımını iyileştirir.
COLRv1, SVG Native'a yaklaşık olarak eşdeğer bir ifade kapasitesine sahiptir ve buna ek olarak karıştırma ve birleştirme işlevi de eklenmiştir. Dört tür renk dolgusu vardır: düz renkler, doğrusal gradyanlar, dairesel gradyanlar ve sarma/konik gradyanlar. COLRv1, tam bir kaydırma, döndürme, kaydırma ve ölçeklendirme dönüşümleri grubunu kullanarak simge öğelerini yeniden konumlandırmanıza ve dönüştürmenize olanak tanır. Ayrıca yazı tipi varyasyonları için destek sunar 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ın şekli aynıdır ancak boyutları farklıdır. Bu, dosyada tek bir şeklin kopyalanmadan yeniden konumlandırılıp yeniden kullanılabileceği anlamına gelir. Bu biçim, her bir karakter için aynı şekilleri gereksiz yere kodlamak zorunda kalmadan, bir karakterin tamamını yeni bir karakter içinde yeniden kullanmanıza olanak tanır. Mevcut renk karakterlerine başvurarak aynı çiçek şekillerinin farklı harflere yerleştirildiği, çiçek süslemelerine sahip dekoratif bir renkli yazı tipi hayal edin. Web yazı tipi kullanım alanı için COLRv1, woff2'nin altında iyi bir şekilde sıkıştırılır. Örneğin, COLRv1 kullanan Twemoji'nin test derlemesi şişirildiğinde yaklaşık 1,2 MB, woff2 biçiminde ise yaklaşık 0,6 MB'tır. Tam Noto Emoji Glifi grubunun derlemesi, bitmap sürümü için 9 MB'tan COLRv1+woff2 biçiminde 1,85 MB'a düşürüldü.
Renk yazı tipi kullanım alanları
Akılda kalıcı başlıklar
Yeni renkli yazı tipi, görsel vurgulamaların, başlıkların ve banner'ların gerçekten ön plana çıkmasını sağlar.
Resim yerine emoji yazı tipleri
Kullanıcı tarafından oluşturulan içerikleri destekliyorsanız kullanıcılarınız muhtemelen emoji kullanıyordur. Günümüzde, platformlar arası tutarlı bir oluşturma sağlamak ve işletim sisteminin desteklediğinden daha yeni emojileri desteklemek için metni taramak ve karşılaşılan emojileri resimlerle değiştirmek çok yaygındır. Ardından, bu resimlerin, pano işlemleri sırasında metne geri döndürülmesi gerekir. Gerçek bir örnek:
Emoji yazı tipiniz varsa metni yazı tipinde oluşturmanız yeterlidir. Örneğin:
<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, COLRv1 bir emoji tepki bileşeninde resim öğelerinin kataloğu yerine kompakt bir yazı tipi dosyası kullanma olanağı sunar.
Tam bir emoji seçici için kaç resim getirmeniz gerektiğini düşünün.
Simge yazı tiplerinde renk
Simge yazı tiplerinde renk kullanmak netliği artırır ve simgelerin daha kolay anlaşılmasını sağlar.
Sanatsal ifade
Alan tasarrufu sağlayan renkli yazı tipleri, web'deki metinlerde yeni sanatsal ifade biçimleri sağlar. Kufi tarzı Arapça yazı tipinin bu örneğinde, geleneksel kaligrafinin mürekkep akışının Kufi tarzı Arapça yazıya uygulandığında nasıl görünebileceğinin sanatsal bir yorumu olarak renk gradyanları kullanılmıştır. Bu tarz, kalem ve mürekkeple değil, taşa oyularak yazılmasından kaynaklanır.
Özellik algılama
Şu anda bir tarayıcı motorunun belirli bir renk yazı tipi biçimini destekleyip desteklemediğini kullanıcı aracısı yoklamasıyla veya Tuval'de renk gliflerinin oluşturulmasını test etmek için @PixelAmbacht'ın ChromaCheck gibi bir kitaplıkta arama yaparak öğrenebilirsiniz. Her iki çözüm de optimum değildir. Özellik testi, yalnızca belirli bir özelliği algılamalı ve kullanıcı aracısı yoklamasından kaçınmalıdır. ChromaCheck kitaplığının desteği belirlemek için yoğun kaynak kullanan 2D tuval işlemleri gerçekleştirmesine gerek yoktur.
Chrome ekibi bu durumu iyileştirmek istiyor. [1, 2] CSS çalışma grubunda, JavaScript'te ve açık bir şekilde CSS'de tarayıcı yazı tipi teknolojisi desteği hakkında bilgi sağlamak için bir dizi tartışma başlattı. Ekip, Chrome'un gelecekteki bir sürümünde renk yazı tipi ve diğer yazı tipi teknolojileri için etkili özellik algılama özelliğini kullanıma sunmayı planlamaktadır.
COLRv1 desteği Chrome ile sınırlı olduğunda projenizde renk yazı tiplerini kullanmak isterseniz bunu iki şekilde yapabilirsiniz: Yazı tipi tedarikçinizden tek renkli glifler içeren bir COLRv1 yazı tipi sağlamasını isteyin. COLRv1'i desteklemeyen kullanıcı aracıları, tek renkli simge oluşturmaya geri döner. Alternatif olarak, COLRv1 desteğinin kullanılıp kullanılamayacağını belirlemek için ChromaCheck kitaplığını veya kullanıcı aracısı koklamayı kullanabilirsiniz. Ardından, destekleyen kullanıcı aracılarında COLRv1 yazı tiplerini yükleyen CSS'yi yayınlar ve diğer tarayıcılarda COLRv0, bitmap yazı tipi biçimi veya OpenType SVG gibi alternatif bir yazı tipi biçimi kullanırsınız.
CSS font-palette desteği
Farklı bir renk grubu kullanmak için yeni bir yazı tipi gerekmemesi çok faydalı olur. Neyse ki bu sorunu çözmek için bir mekanizma var: font-palette CSS özelliği. Chrome ekibi, Chrome'a font-palette desteği ekleme üzerinde çalışmaktadır.
COLRv1 yazı tipleri ve siz
COLRv1 yazı tipleri ilginizi çekiyorsa yazı tipi tedarikçinize projenizde kullanabileceğiniz bir COLRv1 renk yazı tipi hakkında bilgi verin, yukarıdaki örnek ve denemeleri deneyin veya hemen başlayıp kendi yazı tipinizi oluşturmayı deneyebilirsiniz.
Chrome'daki COLRv1 ile ilgili geri bildiriminiz varsa blink-dev posta listesinde yayınlayın veya sorun izleyicimizde sorun bildirin. COLRv1 yazı tipi biçimiyle ilgili geri bildiriminiz varsa COLRv1 spesifikasyonu GitHub deposunda sorun bildirin.
Chrome 98 ile birlikte COLRv1'in web'e yepyeni bir düzeyde yazım yaratıcılığı getirmesinden heyecan duyuyoruz.
Daha fazla bilgi
Daha fazla bilgi edinmek istiyorsanız şu kaynaklardan yararlanabilirsiniz:
COLRv1'in nasıl çalıştığını ve Chrome'da nasıl uygulandığını öğrenmek için Dominik'in BlinkOn 15 konferansındaki konuşmasına göz atın.
- 45. Uluslararası Unicode Konferansı: Vektör Renkli Yazı Tipleri, Roderick Sheeter, Peter Constable ve Dominik Röttsches tarafından verilen konuşma (video, konuşma ayrıntıları)
- SVG resimlerinden COLRv1 yazı tipleri oluşturan nanoemoji yazı tipi derleyici
- Noto Emoji, Twemoji ve diğer örnek yazı tiplerinin mevcut derlemelerini içeren Google Fonts'un color-fonts GitHub deposu
- DJR'nin Bradley Initials yazı tipini sergilediği, COLRv1'i keşfediyor
- Mevcut renk yazı tipi teknolojilerini özellik algılamak için ChromaCheck aracı ve kitaplığı
Teşekkür
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 Nieskens'e ve Roel Nieskens'e çok teşekkür ederiz.