Sevdiğiniz tüm kartların bulunduğu kompakt, sıkıştırmaya uygun renk vektörlü yazı tipleri diyoruz.
Chrome 98'de, Chrome ve Yazı Tipleri ekipleri COLRv1 için destek renk yazı tiplerinin yaygınlaşmasını sağlamak için tasarlanmış COLRv0 yazı tipi biçiminin renk geçişleri ekleme, birleştirme ve karıştırma, ayrıca iç şeklin yeniden kullanımında iyileştirme kullanarak iyi sıkıştırılan net ve küçük yazı tipi dosyaları oluşturabilirsiniz.
Şimdi renklendir
Web'de metin genellikle CSS'de belirtilen bir renkte çizilir. Yazı tipi
belirli bir renk tanımlamaz, yalnızca piksellerin nerede olması gerektiğini belirtir
yer alır. Bu genellikle iyi bir şeydir. CSS, yazarın esnek bir şekilde
rengi. Ancak bazen bir glif, birlikte bir araya getirilmiş
anlamına gelir. Örneğin, açık mavi, pembe ve beyaz çizgili bu bayrak 
yalnızca geçerli metin rengiyle çizilmişse aynı anlamı aktarır.
Günümüzde çoğu kullanıcının gördüğü tek renk yazı tipi emojidir. Emoji'ler
kullanıcılar genellikle sistem emoji yazı tipiyle veya
(bunun kendi komplikasyonları vardır, 
). Büyük dosya
özellikle bit eşlem tabanlı renk yazı tipleri için kullanılan boyutlar, web
yazı tipleri. COLRv1'i destekleyerek, 2020'nin ilk çeyreğine kadar
reklam öğesi renk yazı tipi
kullanmayı öğreteceğim.
Renklerini göster
Üzerinde oynayabileceğiniz birkaç örnek oluşturduk:
Örnekte kullanılan Google Fonts'taki örnek öğeler Google Fonts web API. Bunlar: fonts.google.com adresindeki dizinde yalnızca Chrome 98 veya sonraki sürümlerde çalışır ve deneysel çalışmalar sergiler.
Artık ücretsiz ve açık kaynaklı araçları kullanarak kendi COLRv1 yazı tiplerinizi oluşturabilirsiniz. Kontrol et nanoemoji yazı tipi derleyicisini inceleyin. Bu, SVG kaynak resimlerden COLRv1 yazı tipleri oluşturmanıza olanak tanır ve ardından bunları Chrome 98 veya sonraki sürümler. gradyan renklerinin buradaki talimatları inceleyin.
Örneğin, Bungee Spice yazı tipini mavi ve kırmızı bir renk geçişine sahip olacak şekilde şu şekilde değiştirebilirsiniz:
Sonuçlarınızı @googlefonts adresine tweetleyin 🙂 Neden dairesel veya süpürgeli bir gradyan denemeye ne dersiniz?
COLRv1 ile yeni
Yazı tipi biçimi, rengi desteklemenin farklı yollarını destekler. uygundu, ancak şimdiye kadar web'de hiçbiri başarılı olmadı. (Daha fazla bilgi edinmek için Ödün vermediğiniz sürece Dominik'in BlinkOn 15 konferans konuşmasına göz atın.) Chrome 98, COLRv0'un evrimi COLRv1 için destek sağlar. Umarız COLRv1'in grafik özellikleri ve küçük dosyaların birleşimi sayesinde, birçok renk yazı tipi kullanım alanı için iyi bir seçimdir. COLRv1 renk geçişleri ekler, birleştirme ve karıştırma gibi metodolojilerle daha da kompakt dosyalar oluşturmak için dahili şeklin yeniden kullanımı.
COLRv1 yaklaşık olarak SVG Yerel artı harmanlama ve birleştirme özellikleri üst. Dört tür renk dolgusu vardır: düz renkler, doğrusal renk geçişleri, dairesel renklerini ve süpürme/konik gradyanları kullanmalarını sağlar. COLRv1, öğeleri yeniden konumlandırmanızı ve dönüştürmenizi tam bir çevirme, döndürme, tamir ve ölçek kullanan glif öğeleri dönüşümlerine dahil edilir. Ayrıca, yazı tipi varyasyonları ve yeniden yazı tipindeki mevcut şekil tanımı biçimleri.
Kristal küre emojisini örnek olarak düşünün: Yıldız şeklindeki vurgular şeklin aynı ancak boyutları farklı olabilir. Yani, tek bir şekil dosyanın içinde kopyalanmadan yeniden konumlandırılır ve yeniden kullanılır. Bu biçim, gereksiz bir şekilde yeni bir glif içinde tam bir glifi yeniden kullanabilirsiniz her glif için aynı şekilleri kodlayın. Üzerinde dekoratif renkli bir yazı tipi tasarlayın aynı çiçek şekillerinin farklı harflere yerleştirildiği çiçek süslemeleri kullanarak mevcut renk gliflerini kullanabilirsiniz. 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 bir Twemoji test derlemesi 1,2 MB boyutunda olabilir, ancak woff2 biçiminde yaklaşık 0,6 MB'tır. Yapı tam Noto Emoji Glifi seti, bit eşlem sürümü için 9 MB'tan 1,85 MB'a düşürüldü COLRv1+woff2 biçimindedir.
Renk yazı tipi kullanım alanları
Dikkat çekici başlıklar
Yeni renkli yazı tipi, görsel vurguları, başlıkları ve banner'ları daha çarpıcı hale getirir çıkar.
Artık resim değiştirmeye gerek yok: emoji yazı tipleri
Kullanıcı tarafından oluşturulan içerikleri destekliyorsanız kullanıcılarınız muhtemelen emoji kullanır. Bugün metin tarayıp resimlerle karşılaşılan emojileri platformlar arası tutarlı oluşturma ve yeni sürümleri destekleme olanağı sağlar. daha fazla emoji eklemeniz gerekebilir. Bu durumda resimlerin tekrar metne dönüştürülmesi gerekir pano işlemleri sırasında. Gerçek bir örnek verelim:
Bir emoji yazı tipiniz varsa metni aşağıdaki gibi yazı tipiyle oluşturmanız yeterlidir:
<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, küçük bir yazı tipi dosyası kullanmanızı öneririz.
Eksiksiz bir emoji seçici oluşturmak için ne kadar resim getirmeniz gerektiğini düşünün.
Simge yazı tiplerinde renk
Simge yazı tiplerinde renk kullanmak anlaşılırlık sağlar ve gliflerin daha kolay anlaşılmasını sağlar.
Sanatsal ifade
Alandan tasarruf sağlayan renk yazı tipleri, yardımcı olur. Bu Kufi tarzı Arapça yazı tipi örneğinde, bir geleneksel kaligrafide mürekkep akışının yapabileceği sanatsal yorumu Kufi tarzı Arapça yazı stiline uygulandığında bu görünümü, uç ve mürekkeple değil, taşa oyulmuş olur.
Özellik algılama
Şu anda, tarayıcı motorunun belirli bir rengi destekleyip desteklemediğini yazı tipi biçimi, kullanıcı aracısı algılaması veya belirli bir ChromaCheck gibi bir kitaplık Renk oluşturmayı test etmek için @PixelAmbacht Tuval'de karakterler yer alıyor. Her iki çözüm de optimum değildir. Özellik testi, belirli bir özelliğin kendisini gösterin ve kullanıcı aracısı yoklamasından kaçının. Renk Kontrolü kitaplığın yoğun kaynak kullanan 2D tuval işlemleri gerçekleştirmesi gerekmemelidir desteği belirleme.
Chrome ekibi bu durumu iyileştirmek istemektedir ve bu konuda bir dizi tartışma başlatmıştır. [1, 2] (CSS çalışma grubunda) JavaScript'te tarayıcı yazı tipi teknolojisi desteği hakkında bilgi sağlamak ve sahip olması gerekir. Ekip, bu ürün veya hizmetler için etkili özellik algılama renk yazı tipi ve diğer yazı tipi teknolojilerini kullanıma sunuyoruz.
Şu anda projenizde renk yazı tiplerini kullanmak istiyorsanız COLRv1 desteği Chrome ile sınırlıdır. Bunu yapmanın iki yolu vardır: Yazı tipinize sorun içeren bir COLRv1 yazı tipi tedarikçisi. Şu özelliklere sahip kullanıcı aracıları: COLRv1 desteklenmez tek renkli oluşturmaya geri döner görebilirsiniz. Alternatif olarak ChromaCheck kitaplığını veya kullanıcı aracısını kullanabilirsiniz. yoklama ile COLRv1 desteğinin mevcut olup olmadığını belirleyebilirsiniz. Ardından CSS'yi destekleyici kullanıcı aracılarında COLRv1 yazı tiplerini yükleyen ve alternatif bir yazı tipi kullanan bir bit eşlem yazı tipi biçimi veya diğer tarayıcılarda OpenType SVG gibi bir biçim.
CSS font-palette desteği
Sizin için farklı bir renk grubu kullanmak gerçekten yeni bir yazı tipi kullanılmasını gerektirir. Neyse ki bir mekanizma var: font-palette CSS özelliğini kullanın. İlgili içeriği oluşturmak için kullanılan Chrome ekibi, Chrome'da font-palette desteği.
COLRv1 yazı tipleri ve siz
COLRv1 yazı tipleri ilginizi çekerse, yazı tipi tedarikçinizden bir COLRv1 rengi öğrenin yazı tipini belirlemek için örnekleri ve demoları deneyin veya doğrudan konuya girip kendin yapabiliyor musun?
Chrome'daki COLRv1 ile ilgili geri bildiriminiz varsa blink-dev posta listesi veya sorun izleyicimize sorun bildirin. Geri bildirimde bulunmak isterseniz kullanarak, COLRv1 spesifikasyonu GitHub deposu.
Chrome 98'de, COLRv1'in kullanıcılara nasıl yepyeni bir deneyim ve yaratıcılığa çok yardımcı olur.
Daha fazla bilgi
Daha fazla bilgi almak isterseniz aşağıdaki kaynaklardan yararlanabilirsiniz:
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ı 45: Vektör Renk Yazı Tipleri, Roderick'ten konuşma Sheeter, Peter Constable ve Dominik Röttsches (video, görüşme ayrıntıları)
- nanoemoji yazı tipi derleyici, SVG resimlerden COLRv1 yazı tipleri
- Google Fonts color-fonts GitHub deposu Mevcut Noto Emoji, Twemoji ve diğer örnek yazı tiplerinin derlemelerini içeren
- DJR'nin Bradley Initials yazı tipini sergilediği, COLRv1'i keşfediyor
- ChromaCheck aracını ve kitaplığını kullanarak özellik algılama kullanılabilir renk yazı tipi teknolojileri
Teşekkür
Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner'a teşekkür ederiz Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens ve diğer paydaşlar COLRv1'e