Colrv1 dan Css Font-Palette

Menurut Toshi Omagari, pengarang Arcade Game Typography, fon digital berwarna-warni pertama di dunia dicipta pada tahun 1982 untuk permainan video yang tidak pernah dikeluarkan yang dipanggil Insector. Fon berwarna-warni, kadang-kadang dipanggil jenis kromatik, masih jarang berlaku di web, walaupun format fon COLR mempunyai sokongan penyemak imbas penuh sejak 2018 (walaupun di Internet Explorer!).

Teknologi ini membuka urat kreativiti tipografi yang sama sekali baru. Walaupun beberapa fon warna yang saya lihat telah bersemangat, paling baik, fon kromatik adalah menyeronokkan, inovatif dan menarik perhatian. Dengan kedua-dua penambahan ciri CSS baru-termasuk harta font-palet dan peraturan @font-palette-nilai-untuk mengawal palet warna fon warna dan evolusi format fon Colr, ini adalah masa yang tepat untuk menyelam dan bereksperimen dengan apa yang boleh dilakukan oleh tipografi web moden.

Sokongan Colr

Saya terakhir menulis tentang fon warna pada tahun 2018. Pada masa itu, terdapat empat piawaian yang berbeza untuk typefaces berwarna-warni: OpenType-SVG, Colr, SBIX, dan CBDT/CBLC. Anda boleh menggunakan Chromacheck untuk melihat format fon warna yang disokong oleh penyemak imbas anda sendiri.

Google Chrome telah menandakan OpenType-SVG sebagai "wontfix" yang bermaksud bahawa format tidak akan disokong oleh Chrome atau Edge. SBIX dan CBDT/CBLC kebanyakannya boleh diabaikan untuk digunakan di web kerana kedua -duanya berdasarkan imej raster dan menjadi kabur pada saiz fon yang lebih besar. Saiz fail besar fon berasaskan bitmap juga menjadikan mereka pilihan yang tidak baik untuk web.

Ulrike Rausch adalah pencipta Liebeheide, fon warna bitmap yang secara tidak sengaja mereplikasi rupa pena ballpoint. "Matlamat terbesar saya adalah untuk menghasilkan semula teks tulisan tangan secara sah," katanya kepada saya. "Bagi Liebeheide, saya akhirnya dapat mensimulasikan atribut buatan tangan ini dengan fon. Kelemahan? Semua imej PNG dalam fail font menambah dan menghasilkan saiz fail OTF yang besar. Ini mungkin tidak menjadi masalah untuk aplikasi desktop, seperti Adobe InDesign, tetapi untuk digunakan di web font tidak boleh digunakan. "

Semua pelayar menyokong fon COLR (kini secara amnya dirujuk sebagai COLRV0). Versi 98 Chrome (dan Edge), yang dikeluarkan pada bulan Februari, menambah sokongan untuk Colrv1, evolusi format.

Data sokongan penyemak imbas ini adalah dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi itu dan ke atas.

Desktop

Mudah alih / tablet

Colrv0 dan Colrv1

Colrv1 adalah sebahagian daripada standard OpenType 1.9. Walaupun COLRV0 awal tidak mempunyai banyak kemungkinan kreatif OpenType-SVG, COLRV1 sepadan dengan kemungkinan tersebut sambil mengelakkan kelemahan tertentu. Colrv0, sebagai contoh, hanya boleh melakukan warna pepejal manakala Colrv1 boleh melakukan kecerunan linear, radial, dan conic. Format ini juga menambah komposit dan penggabungan dan membolehkan penggunaan semula bentuk untuk menyimpan saiz fail.

Pakar tipografi Roel Nieskins menerangkan: "Saya pernah mengatakan format OpenType-SVG adalah format terbaik kerana ia menawarkan fleksibiliti yang paling-sehingga saya menyedari ini terlalu kompleks untuk pekerjaan peringkat rendah seperti rendering teks. Ia melaksanakan subset asas SVG pada tahap rendering fon. Tetapi ia tidak berfungsi dengan baik dengan teknologi font lain (mengisyaratkan, paksi berubah -ubah, dan lain -lain), dan ia adalah kesakitan untuk dilaksanakan. Jadi, saya beralih ke Colr. Colr pada dasarnya menggunakan semula segala-galanya yang telah dimiliki oleh fon OpenType. Ia 'hanya' menambah lapisan, dan kemungkinan untuk menukar warna setiap lapisan. Mudah, tetapi berkesan. "

Colrv1 sepenuhnya serasi dengan paksi font berubah -ubah, dan sudah ada contoh fon Colr yang berubah -ubah seperti lencana merit, warna plakato dan warna rocher.

Berikut adalah contoh yang menarik dari Ulrike Rausch dari apa yang mungkin dengan format, tipikal (kini belum dirilis) yang secara digital mencipta rupa tanda neon:

Akiem Helmling dari jenis bawah tanah yang diasingkan adalah terpikat dengan Colrv1, memberitahu saya bahawa format Colrv1 berpotensi mempunyai kesan yang sama (atau bahkan lebih besar) terhadap reka bentuk jenis daripada fon berubah -ubah dalam beberapa tahun kebelakangan ini. " Untuk Akiem, sudah pasti format unggul. "Semua format warna bekas telah menjadi hacks buruk untuk menambah warna kepada glyphs. Walaupun OpenType-SVG dianggap oleh sesetengah orang sebagai penyelesaian yang baik, dari sudut pandangan saya, tidak sama sekali. Dari sudut pandangan pragmatik, SVG adalah 'bilik terkunci' dalam struktur terbuka OpenType. Tidak ada cara untuk menggunakan semula atau menghubungkan data atau membuat sambungan antara jadual fon lain dan jadual SVG. Dan kerana ini, kita tidak boleh membuat font berubah -ubah dengan data SVG yang berubah -ubah. "

Masih awal hari untuk formatnya. Mozilla belum lagi menghantar Colrv1 tetapi telah mengambil kedudukan positif dalam format itu, menyatakan bahawa ia mempunyai "potensi untuk menggantikan fon OpenType-SVG dalam penggunaan web." Apple enggan melaksanakannya di Safari.

Fon Colrv1 masih akan muncul dan boleh dibaca dalam pelayar ini tetapi semua huruf akan menjadi satu warna pepejal (yang boleh anda tetapkan dengan harta warna CSS, sama seperti fon biasa). Kami belum melihat banyak jenis foundries melepaskan typefaces Colrv1, dan beberapa alat reka bentuk yang popular seperti Figma bahkan tidak menyokong Colrv0, tetapi saya berharap dan percaya ia akan menjadi masa depan tipografi warna di web. Dalam masa yang singkat Colrv1 telah berada di sekitar sana telah ada beberapa contoh yang indah tentang apa yang boleh dilakukan oleh teknologi, seperti Reem Kufi dan Bradley Inisials.

Colr dan CSS

Jika anda menggunakan fon warna, anda mungkin mahu dapat mengawal warna. Sehingga kini, itu mustahil untuk dilakukan dengan CSS. Harta Font-Palette membawa kuasa untuk menimpa skema warna lalai dari jenis huruf dan memohon sendiri. Harta ini berfungsi pada typefaces Colrv0 dan Colrv1. (Apple's Myles Maxfield menerangkan bahawa fon SVG boleh memilih untuk menggunakan palet, sedangkan semua warna jenis huruf Colr secara automatik ditindih oleh CSS.)

Datang dengan palet warna yang baik adalah seni halus. Sesetengah pereka jenis telah melakukan kerja keras untuk kami dan memasukkan palet alternatif di dalam fon. Anda boleh memilih dari skema warna yang berbeza menggunakan asas-palet dalam CSS.

Bagaimana anda mengetahui sama ada fon menawarkan palet alternatif? Tapak untuk fon mungkin memberitahu anda. Jika tidak, terdapat alat yang berguna yang dipanggil Wakamai Fondue yang akan menyenaraikan semua skema warna yang ada (ditunjukkan dalam imej di bawah). Untuk contoh ini, saya akan menggunakan Rocher Color, fon warna berubah -ubah percuma dari Henrique Beier dengan getaran Flintstones. Dari melihat Wakamai Foundue kita dapat melihat bahawa jenis huruf ini menggunakan empat warna dan dilengkapi dengan sebelas pilihan palet yang berbeza.

Menggunakan Base-Palette: 0 akan memilih palet warna lalai (dalam hal Rocher, itu warna oren dan coklat).

Menggunakan Base-Palette: 1 akan memilih palet alternatif pertama yang ditakrifkan oleh pencipta jenis huruf, dan sebagainya. Dalam contoh kod berikut, saya memilih palet warna yang berbeza warna kelabu:

 @Font-Palette-Values ​​--Grays {
  Font-Family: Rocher;
  Base-Palette: 9;
}

Sebaik sahaja anda telah memilih palet dengan peraturan CSS @Font-Palette-nilai, anda boleh menggunakannya menggunakan harta font-palet:

 .Grays {
  Font-Family: 'Rocher';
  Font-Palette: --Grays;
}

Of course, you might want to create your own palette to match your brand colors or to meet your own design sensibility. Jika anda akan mengatasi semua warna maka anda tidak perlu menentukan asas-palet.

Mari kita ambil bungee dari pereka jenis perintis David Jonathan Ross sebagai contoh. Ia hanya menggunakan dua warna secara lalai, merah dan putih. Dalam contoh berikut, saya mengatasi kedua-dua warna fon, jadi asas-palet tidak penting dan ditinggalkan:

 @Font-Palette-Values ​​--PinkandGray {
  Font-Family: Bungee;
  Mengatasi warna:
    0 #c1cbed,
    1 #FF3A92;
}

@Font-Palette-Values ​​--GrayAndPink {
  Font-Family: Bungee;
  Mengatasi warna:
    0 #FF3A92,
    1 #c1cbed;
}

Sebagai alternatif, anda boleh menetapkan asas-palet sebagai titik permulaan dan secara selektif menukar hanya beberapa warna. Di bawah ini saya menggunakan palet warna kelabu Rocher, tetapi mengatasi satu warna dengan hijau minty:

 @Font-Palette-Values ​​--GraysRemix {
  Font-Family: Rocher;
  Base-Palette: 9;
  Mengatasi warna: 
    2 RGB (90,290,210);
}

badan {
  Font-Family: "Rocher";
  Font-Palette: --GraysRemix;
}

Apabila menentukan warna-warna yang menimpa, sukar untuk mengetahui yang mana bit fon akan ditindih oleh nombor itu-anda perlu bermain-main dan bereksperimen dan mencapai kesan yang dikehendaki melalui percubaan dan kesilapan.

Sekiranya anda berharap, anda juga boleh menukar warna fon emoji, seperti Twemoji (ditunjukkan di bawah) atau NOTO. Berikut adalah demo yang menyeronokkan dari jurutera font di Google.

Batasan semasa

Satu batasan yang dikesali, sekurang-kurangnya pada masa ini adalah bahawa sifat adat CSS tidak berfungsi dalam @font-palette-values. Ini bermakna perkara berikut tidak sah:

 @Font-Palette-Values ​​--PinkandBlue {
  Font-Family: Bungee;
  Mengatasi warna:
    0 var (-merah jambu),
    1 var (-biru);
}

Satu lagi batasan: animasi dan peralihan dari satu font-palet ke yang lain tidak diinterpolasi-bermakna anda boleh beralih dengan serta-merta dari satu palet ke yang lain, tetapi tidak dapat secara beransur-ansur menghidupkan di antara mereka. Impian saya tentang fon emoji animasi yang luridly sedih tidak direalisasikan.

Sokongan penyemak imbas

Font-Palette dan @Font-Palette-nilai telah disokong di Safari sejak versi 15.4, dan mendarat di Chrome dan Edge dengan pembebasan versi 101.

Data sokongan penyemak imbas ini adalah dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi itu dan ke atas.

Desktop

Mudah alih / tablet

Gunakan kes

Anda mungkin sudah membayangkan bagaimana anda boleh menggunakan fon warna dalam projek anda sendiri. Terdapat beberapa kes penggunaan khusus, walaupun, yang patut dipanggil.

Fon Colr dan Ikon

Fon ikon mungkin tidak lagi menjadi kaedah yang paling popular untuk memaparkan ikon di web (Chris menerangkan mengapa) tetapi mereka masih banyak digunakan. Jika anda menggunakan fon ikon dengan pelbagai warna, seperti duotone dari fontawesome atau ikon dua nada dari reka bentuk bahan, Font-Palette boleh menawarkan kaedah yang lebih mudah untuk penyesuaian.

Menyelesaikan masalah emoji

Nolan Lawson baru -baru ini menulis tentang masalah menggunakan emoji di web. Blog pemaju Chrome menerangkan satu penyelesaian semasa yang agak kompleks:

Jika anda menyokong kandungan yang dihasilkan pengguna, pengguna anda mungkin menggunakan emojis. Hari ini sangat biasa untuk mengimbas teks dan menggantikan mana-mana emoji yang dihadapi dengan imej untuk memastikan rendering silang platform yang konsisten dan keupayaan untuk menyokong emojis yang lebih baru daripada sokongan OS. Imej -imej tersebut kemudiannya perlu dihidupkan semula ke teks semasa operasi papan klip.

Jika ia menerima sokongan penyemak imbas yang lebih besar, fon emoji Colrv1 akan menawarkan pendekatan yang jauh lebih mudah. Colrv1 juga dilengkapi dengan manfaat yang kelihatan segar pada saiz apa pun, sedangkan emojis penyemak imbas asli mendapat kabur dan pixelated pada saiz fon yang lebih besar.

Membungkus

Sebelum fon warna, kreativiti tipografi di web adalah terhad untuk menggunakan strok atau kecerunan mengisi dengan CSS. Anda sentiasa boleh melakukan sesuatu yang lebih adat dengan imej vektor, tetapi itu bukan teks sebenar - ia tidak boleh dipilih oleh pengguna dan disalin ke papan klip, ia tidak boleh dicari di halaman dengan arahan F , ia tidak dibaca oleh pembaca skrin atau enjin carian, dan anda perlu membuka Adobe Illustrator hanya untuk mengedit salinan itu.

Fon warna berpotensi untuk menarik perhatian pengguna, menjadikannya sempurna untuk halaman pendaratan dan sepanduk. Mereka mungkin bukan sesuatu yang sering anda capai, tetapi mereka menjanjikan kemungkinan ekspresif dan kreatif baru untuk reka bentuk web yang boleh membuat laman web anda menonjol.

Atas ialah kandungan terperinci Colrv1 dan Css Font-Palette. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!