خطوط صغيرة ومتحركة ومرنة، ومتوافقة مع جميع النكهات المتدرجة المفضّلة لديك.
في Chrome 98، أضافت فِرق Chrome وFonts الدعم لاستخدام COLRv1، وهو عبارة عن تطوير لتنسيق خطوط COLRv0 يهدف إلى جعل الخطوط الملونة على نطاق واسع من خلال إضافة التدرجات والإنشاء والدمج وتحسين إعادة استخدام الأشكال الداخلية لملفات الخطوط المتشابكة والمدمجة التي يتم ضغطها جيدًا.
التلوين الآن
على الويب، يُرسم النص عادةً باللون المحدد في CSS. لا يحدد الخط أي لون معين، بل يشير فقط إلى المكان الذي يجب وضع وحدات البكسل فيه. وعادةً ما يكون ذلك جيدًا. يتيح CSS للمؤلف اختيار اللون بشكل مرن. ومع ذلك، في بعض الأحيان يحتوي حرف رسومي على ألوان متعددة لها
معنى. على سبيل المثال، لن ينقل المعنى نفسه إذا تم رسمه ببساطة في لون النص الحالي إذا كان على شكل علامة 
بخطوط زرقاء فاتحة ووردية وبيضاء.
اليوم، بالنسبة لمعظم المستخدمين، الرموز التعبيرية هي الخطوط الألوان الوحيدة التي يرونها. تظهر الرموز التعبيرية عادةً على الويب من خلال خط الرموز التعبيرية للنظام، أو من خلال إدراج صور
(التي لها إضافات خاصة بها، 
). إنّ أحجام الملفات الكبيرة
خاصةً الخاصة بالخطوط ذات الألوان المستندة إلى الصور النقطية جعلت من الصعب استخدام خطوط الويب
في الرموز التعبيرية. من خلال دعم COLRv1، نأمل أن نشهد انتشارًا كبيرًا
لاستخدام خطوط الألوان الإبداعية على الويب وخارجه.
أريد الاطّلاع على ألوانك
لقد أنشأنا مثالين يمكنك استخدامهما:
تتوفّر نماذج مواد العرض من Google Fonts المستخدَمة في المثال على Google Fonts على الويب API. وهي غير مُدرَجة في الدليل على fonts.google.com لأنّها لن تعمل إلا على الإصدار 98 من Chrome أو الإصدارات الأحدث وستعرض العمل التجريبي.
يمكنك الآن إنشاء خطوط COLRv1 الخاصة بك باستخدام أدوات مجانية ومفتوحة المصدر. اطّلِع على أداة تجميع خطوط nanoemoji التي تتيح لك إنشاء خطوط COLRv1 من صور مصدر SVG، ثم تجربتها في Chrome 98 أو الإصدارات الأحدث. ننصحك بإضفاء لمساتك الخاصة على Bungee Spice عبر تغيير ألوان التدرج باتّباع هذه التعليمات.
على سبيل المثال، يمكنك تعديل خط Bungee Spice ليصبح تدرجًا باللونين الأزرق والأحمر، على النحو التالي:
يمكنك نشر نتائجك على Twitter على @googlefonts 🙂. لماذا لا تجرِّب تدرجًا نصفيًا أو توسيعًا متحرّكًا؟
الجديد باستخدام COLRv1
يدعم تنسيق الخط طرقًا متعددة لدعم الألوان، وجميعها بمفاضلات مختلفة - ولكن لم ينجح أي منها على الويب حتى الآن. (لمعرفة المزيد حول المفاضلات، يمكنك إلقاء نظرة على محاضرة "دومينيك" في مؤتمر BlinkOn 15.) يوفّر Chrome 98 الدعم لـ COLRv1، وهو تطوير لـ COLRv0. نأمل أن يجعل مزيج COLRv1 من القدرات الرسومية والملفات المضغوطة اختيارًا جيدًا للعديد من حالات استخدام خطوط الألوان. يضيف COLRv1 تدرجات وإنشاء ومزج ويحسن إعادة استخدام الشكل الداخلي لإنشاء ملفات أكثر إحكامًا.
يحتوي COLRv1 على إمكانيات التعبير، تعادل تقريبًا SVG Native، بالإضافة إلى المزج والإنشاء الذي نضيفه أعلاه. هناك أربعة أنواع من عمليات تعبئة الألوان: الألوان الخالصة، والتدرجات الخطية، والتدرجات الشعاعية، وتدرجات التمرير/التدرج المخروطي. يتيح لك COLRv1 تغيير موضع العناصر الرسومية وتحويلها باستخدام مجموعة كاملة من عمليات التحويل والتدوير والشفافة والمقاييس. بالإضافة إلى ذلك، فهي تتميز بدعم تباينات الخطوط وإعادة استخدام تنسيقات تعريف الشكل الحالية في الخط.
يمكن اعتبار الرموز التعبيرية الكرة البلورية كمثال: العناصر المميّزة على شكل نجمة هي نفسها الشكل ولكن بأحجام مختلفة، ما يعني أنّه يمكن إعادة وضع شكل واحد فقط وإعادة استخدامه بدون تكرار داخل الملف. يتيح لك التنسيق إعادة استخدام حرف رسومي كامل داخل حرف رسومي جديد، دون الحاجة إلى ترميز نفس الأشكال بشكل متكرر لكل حرف رسومي. تخيل خطًا ملونًا مزخرفًا مع زخارف زهور، حيث يتم وضع نفس أشكال الزهور على أحرف مختلفة من خلال الإشارة إلى الرموز الرسومية اللونية الموجودة فقط. بالنسبة لحالة استخدام خط الويب، يتم ضغط COLRv1 جيدًا ضمن woff2. على سبيل المثال، يستغرق الإصدار التجريبي من Twemoji باستخدام COLRv1 حوالي 1.2 ميغابايت، بينما يبلغ حجمه حوالي 0.6 ميغابايت في شكل woff2. يتم تقليل حجم نسخة مجموعة Noto Emoji Glyph الكاملة من 9 ميغابايت لنسخة الصورة النقطية إلى 1.85 ميغابايت بتنسيق COLRv1+woff2.
حالات استخدام الخطوط الملونة
عناوين رئيسية جذابة
يساعد الخط الجديد اللون في إبراز العناصر المرئية والعناوين الرئيسية وإعلانات البانر.
لا حاجة بعد الآن إلى استبدال الصور: خطوط الرموز التعبيرية
إذا كنت تدعم المحتوى من إنشاء المستخدمين، من المحتمل أن يستخدم المستخدمون الرموز التعبيرية. من الشائع جدًا اليوم فحص النص واستبدال أي رموز تعبيرية تظهر بصور لضمان عرض متّسق على عدّة منصات وإمكانية دعم رموز تعبيرية أحدث مما يدعمه نظام التشغيل. ينبغي بعد ذلك تبديل هذه الصور إلى نص أثناء عمليات الحافظة. إليك مثال حقيقي:
إذا كان لديك خط رموز تعبيرية، فعليك فقط عرض النص بالخط، على النحو التالي:
<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>
وبالمثل، في مكوِّن تفاعل الرموز التعبيرية، يوفر COLRv1 الفرصة لاستخدام ملف خط مضغوط بدلاً من كتالوج مواد عرض الصور.
تخيّل عدد الصور التي تحتاج إلى جلبها من أجل أداة اختيار الرموز التعبيرية الكاملة.
الألوان في خطوط الرموز
يضيف استخدام اللون في خطوط الرموز وضوحًا ويجعل الرسوم الرسومية أسهل في الفهم.
التعبير الفني
تتيح الخطوط الملونة الموفرة للمساحة أشكالاً جديدة من التعبير الفني في النص على الويب. يستخدم هذا المثال على الخط العربي بالأسلوب الكوفي تدرّجات الألوان كتفسير فني للشكل الذي يمكن أن يبدو عليه تدفق الحبر في خط الخط التقليدي عند تطبيقه على النمط الكوفي في الكتابة العربية، والذي نشأ من عدم الكتابة بالحبر والحبر، ولكن في الحجر.
رصد الميزات
في الوقت الحالي، يمكن معرفة ما إذا كان المحرّك يتيح استخدام تنسيق خطّ ملوّن معيّن عن طريق إدراك وكيل المستخدم أو البحث في مكتبة مثل ChromaCheck من خلال @PixelAmbacht لاختبار عرض الرموز الملونة على لوحة الرسم. كلا الحلين ليس مثاليًا. ويجب أن يستكشف اختبار الميزات ميزة معيّنة فقط بنفسها وأن يتجنّب استقصاء وكيل المستخدم. ولا يُفترض أن تحتاج مكتبة ChromaCheck إلى إجراء عمليات لوحة رسم ثنائية الأبعاد تستهلك قدرًا كبيرًا من الموارد لتحديد الدعم.
ويريد فريق Chrome تحسين هذا الأمر وبدأ سلسلة من المناقشات [1، 2] في مجموعة عمل خدمة مقارنة الأسعار (CSS) لتوفير معلومات حول إتاحة تقنية الخطوط في المتصفّح في JavaScript، وتعريفه في CSS. يخطط الفريق لإصدار اكتشاف فعال للميزات للخط اللوني وتقنيات الخطوط الأخرى في إصدار مستقبلي من Chrome.
إذا كنت ترغب في استخدام خطوط الألوان في مشروعك الآن عندما يقتصر دعم COLRv1 على Chrome، فهناك طريقتان يمكنك من خلال ذلك: اطلب من مورد الخطوط أن يطلب منك خط COLRv1 يحتوي على رموز نصية أحادية اللون أيضًا. سيعود برامج وكيل المستخدم التي لا تتوافق مع COLRv1 إلى عرض الرموز الرسومية الأحادية اللون. بدلاً من ذلك، يمكنك استخدام مكتبة ChromaCheck أو تعقب وكيل المستخدم لتحديد ما إذا كان دعم COLRv1 متاحًا. بعد ذلك، تقدّم لغة CSS التي تحمِّل خطوط COLRv1 في برامج وكيل المستخدم وتستخدم تنسيق خط بديلاً، مثل COLRv0، أو تنسيق خط نقطي أو OpenType SVG في متصفحات أخرى.
إتاحة لوحة خطوط CSS
سيكون من المفيد للغاية إذا كان استخدام مجموعة مختلفة من الألوان لا يتطلب خطًا جديدًا. ولحسن الحظ، هناك آلية تتمثل في سمة CSS للوحة الخط. ويعمل فريق Chrome على إضافة إتاحة لوحة الخطوط في Chrome.
خطوط COLRv1 وأنت
إذا كانت خطوط COLRv1 تثير اهتمامك، اسأل بائع الخطوط عن خط COLRv1 اللوني لاستخدامه في مشروعك، أو جرِّب الأمثلة والعروض التوضيحية أعلاه، أو لماذا لا تتعمق فيها مباشرةً وجرِّب إنشاء خطك الخاص؟
إذا كانت لديك ملاحظات حول COLRv1 في Chrome، يمكنك النشر إلى القائمة البريدية Blink-dev أو الإبلاغ عن مشكلة في أداة تتبُّع المشاكل. إذا كانت لديك ملاحظات حول تنسيق خط COLRv1 نفسه، يُرجى الإبلاغ عن مشكلة في مستودع GitHub لمواصفات COLRv1.
مع الإصدار 98 من Chrome، نحن متحمّسون لمعرفة ما إذا كان COLRv1 يوفّر مستوى جديدًا تمامًا من الإبداع في مجال الطباعة على الإنترنت.
مزيد من المعلومات
إذا أردت الاطّلاع على مزيد من التفاصيل، نوفّر لك المزيد من المراجع:
للتعرف على كيفية عمل COLRv1 وكيفية تنفيذه في Chrome، راجع مؤتمر BlinkOn 15 الذي شارك فيه دومينيك.
- مؤتمر يونيكود الدولي رقم 45: الخطوط الملونة المتجهة، حديثهم "رودريك شيتر" و"بيتر كونستابل" و"دومينيك روتشس" (فيديو، تفاصيل الحديث)
- برنامج تجميع خطوط nanoemoji، الذي يعمل على إنتاج خطوط COLRv1 من صور SVG
- مستودع GitHub للخطوط الملونة في Google Fonts يحتوي على الإصدارات الحالية من Noto Emoji وTwemoji وعيّنات أخرى من الخطوط
- عرض DJR بخط Bradley FirstName لاستكشاف COLRv1
- أداة ومكتبة ChromeCheck لاكتشاف تقنيات خطوط الألوان المتاحة
شكر وتقدير
شكرًا جزيلاً على بيهداد إسفاهبود، وكوزيمو لوبو، وبيتر كونستيبل، وبن فاغنر، وفيرنر ليمبيرغ، وديف كروسلاند، وفلاديمير ليفانتوفسكي، وجوناثان كيو، لورنس بيني، وكريس ليلي، وديفيد جوناثان روس، وأندروير، وجاست فان روزوم، ورويل نيسكينف على مساهماتهم في