Tüm favori degrade renklerinizi içeren kompakt, sıkıştırmaya uygun, renkli vektör yazı tipleri.
Chrome 98'de Chrome ve Yazı Tipleri Ekipleri, degradeler, kompozisyon ve karışım ekleyerek renkli yazı tiplerini yaygınlaştırmayı amaçlayan COLRv0 yazı tipi biçiminin bir evrimi olan COLRv1 desteğini ekledi. Ayrıca, iyi sıkıştırılan net ve kompakt yazı tipi dosyaları için geliştirilmiş dahili şekil yeniden kullanımını da ekledi.
Şimdi renklendir
Web'de metin genellikle CSS'de belirtilen bir renkle ç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 simge, birlikte anlam ifade eden birden fazla renk içerir. Örneğin, açık mavi, pembe ve beyaz çizgili bu bayrak 
, yalnızca mevcut metin renginde çizilseydi aynı anlamı vermezdi.
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 (
'te kendi komplikasyonları vardır) gösterilir. Özellikle bitmap tabanlı renkli yazı tipleri için büyük dosya boyutları, emojilerde 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ınlanmıştı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 resimlerinden COLRv1 yazı tipleri oluşturmanıza olanak tanıyan nanoemoji yazı tipi derleyicisini inceleyin ve ardından 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 desteklemenin birden fazla yolunu destekler. Bunların hepsi farklı avantaj ve dezavantajlara sahiptir ancak şu ana kadar 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, tek bir şeklin dosya içinde 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ında COLRv1, woff2'den daha iyi 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ü.
Renkli yazı tipi kullanım alanları
Akılda kalıcı başlıklar
Yeni bir renk yazı tipi, görsel öne çıkan anlar, başlıklar ve banner'ları öne çıkarır.
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
Alandan tasarruf sağlayan renkli yazı tipleri, web'deki metinlerde yeni sanatsal ifade biçimleri sunar. 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ın kökeni, kalem ve mürekkeple yazılmaktan değil, taşa oyulmaktan gelir.
Özellik algılama
Şu anda, bir tarayıcı motorunun belirli bir renk yazı tipi biçimini destekleyip desteklemediğini öğrenmek için kullanıcı aracısı koku alma özelliğini kullanabilir veya @PixelAmbacht tarafından Canvas'ta renk simgelerinin oluşturulmasını test etmek için ChromaCheck gibi bir kitaplıkta arama yapabilirsiniz. Her iki çözüm de optimum değildir. Özellik testi yalnızca belirli bir özelliği algılamalı ve kullanıcı aracısı koku alma işlemini önlemelidir. ChromaCheck kitaplığının, desteği belirlemek için yoğun kaynak kullanan 2D kanvas işlemleri yapması gerekmemelidir.
Chrome ekibi bu durumu iyileştirmek istiyor ve JavaScript'te ve CSS'de beyanla tarayıcı yazı tipi teknolojisi desteği hakkında bilgi sağlamak için CSS çalışma grubunda bir dizi tartışma başlattı [1, 2]. Ekip, Chrome'un gelecekteki bir sürümünde renkli yazı tipi ve diğer yazı tipi teknolojileri için verimli özellik algılama özelliğini kullanıma sunmayı planlıyor.
COLRv1 desteği Chrome ile sınırlıyken projenizde şu anda renkli yazı tipleri kullanmak istiyorsanız bunu iki şekilde yapabilirsiniz: Yazı tipi tedarikçinizden tek renkli karakterler de içeren bir COLRv1 yazı tipi 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 yazı tipi paleti 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'da font-palette desteği eklemek için çalışıyor.
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 kendi yazı tipinizi oluşturmayı deneyebilirsiniz.
Chrome'daki COLRv1 ile ilgili geri bildiriminiz varsa blink-dev posta listesine gönderin veya sorun izleyicimizde sorun kaydı oluşturun. 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 isterseniz ş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, COLRv1'i keşfederken Bradley Initials yazı tipini sergilemesi
- Mevcut renkli yazı tipi teknolojilerini algılamak için ChromaCheck aracı ve kitaplığı
Teşekkür ederiz
COLRv1'e katkıda bulunan 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 ve diğer herkese teşekkür ederiz.