גופנים קומפקטיים וידידותיים לדחיסה עם תמונות וקטוריות, עם כל הטעמים האהובים עליכם הדרגתיים.
בגרסה 98 של Chrome, הצוותים של Chrome ו-Fonts הוסיפו תמיכה ב-COLRv1, אבולוציה של פורמט הגופנים COLRv0 שנועד להפוך גופנים לגוונים נרחבים על ידי הוספת צבעים הדרגתיים, הרכבה ומיזוג, ושימוש חוזר פנימי בצורה טובה יותר בקובצי גופנים חדים וקומפקטיים שנדחסו היטב.
צביעה עכשיו
באינטרנט, בדרך כלל טקסט מצויר בצבע שצוין ב-CSS. הגופן לא מגדיר צבע מסוים, אלא רק מציין את המיקום של הפיקסלים. בדרך כלל זה דבר טוב. CSS מאפשר למחבר לבחור צבע באופן גמיש. עם זאת, לפעמים גליף מכיל כמה צבעים שביחד יש להם משמעות. לדוגמה, הדגל 
עם פסים בצבעי כחול בהיר, ורוד ולבן לא ישפר את אותה המשמעות אם הוא פשוט שורטט בצבע הטקסט הנוכחי.
כיום, רוב המשתמשים יכולים להשתמש בסמלי אמוג'י רק כגופני צבע. בדרך כלל סמלי אמוג'י מופיעים באינטרנט באמצעות גופן האמוג'י של המערכת, או על ידי הוספת תמונות
(שיש סיבוכים משלה, 
). קבצים גדולים במיוחד
לגופני צבע המבוססים על מפת סיביות הקשו על השימוש בגופני אינטרנט ליצירת אמוג'י. על ידי תמיכה ב-COLRv1, אנחנו מקווים שתהיה עלייה בשימוש בגופן צבעי קריאייטיב באינטרנט, ומעבר לכך.
אני רוצה לראות את הצבעים שלך
יצרנו כמה דוגמאות שתוכל לשחק איתן:
הנכסים לדוגמה מ-Google Fonts שבהם נעשה שימוש בדוגמה זמינים ב-Google Fonts באינטרנט API. הם לא רשומים בספרייה בכתובת fonts.google.com כי הם יפעלו רק ב-Chrome בגרסה 98 ואילך ומציגים עבודות ניסיוניות.
עכשיו אפשר ליצור גופני COLRv1 משלכם באמצעות כלים בקוד פתוח וכלים חינמיים. כדאי לנסות את מהדר הגופנים של ננו-אמוג'י, שמאפשר ליצור גופני COLRv1 מתמונות מקור של SVG, ואז לנסות אותם ב-Chrome בגרסה 98 ואילך. נסו לשנות את הצבעים של באנג'י על ידי שינוי של הצבעים ההדרגתיים לפי ההוראות האלה. כך עושים זאת:
לדוגמה, אפשר לשנות את הגופן 'באנג'י תבלינים' כך שיהיה שיפוע בכחול ואדום, באופן הבא:
צייץ את התוצאות שלך ב-@googlefonts 🙂 למה שלא כדאי לנסות רדיאלי או ניקוי הדרגתי?
חדש עם COLRv1
פורמט הגופן תומך במספר דרכים לתמיכה בצבע, כל אחת עם חלופות שונות – אבל אף אחת מהן לא השיגה הצלחה באינטרנט עד כה. (למידע נוסף על היתרונות, צפו בהרצאה של Dominik ב-BlinkOn 15.) Chrome 98 כולל תמיכה ב-COLRv1, התפתחות של COLRv0. אנחנו מקווים שהשילוב של יכולות גרפיות וקבצים קומפקטיים ב-COLRv1 יהפוך אותו לבחירה טובה בתרחישים רבים של שימוש בגופנים בצבעים. ב-COLRv1 מוסיפים הדרגתיים, חיבור ומיזוג, ומשפרים את השימוש החוזר בצורה הפנימית כדי ליצור קבצים קומפקטיים עוד יותר.
ל-COLRv1 יש יכולת הבעה שדומה בערך ל-SVG Native ושילוב והרכבה למעלה. יש ארבעה סוגים של מילויי צבע: צבעים אחידים, הדרגה ליניארית, הדרגה רדיאלית והדרגתיות של שיפוע/קוניק. בעזרת COLRv1 אפשר למקם מחדש רכיבי גליף ולהמיר אותם באמצעות קבוצה מלאה של טרנספורמציות: תרגום, סיבוב, שקוף וקנה מידה. בנוסף, היא כוללת תמיכה בווריאציות של גופנים, ועושה שימוש חוזר בפורמטים קיימים של הגדרות צורה בגופן.
ניקח לדוגמה את האמוג'י של כדור הבדולח: הדגשות בצורת כוכב הן אותה צורה אבל גדלים שונים, כך שניתן לשנות את המיקום של צורה אחת בלבד ולהשתמש בה שוב ללא כפילויות. הפורמט מאפשר להשתמש שוב בגליף מלא בגליף חדש, בלי שתצטרכו לקודד שוב ושוב את אותן הצורות לכל גליף. נסי לדמיין גופן צבעים דקורטיבי עם קישוטים פרחוניים, שבו אותן צורות פרחים מוצבות באותיות שונות על ידי אזכור של גליפים צבעים קיימים. בתרחיש לדוגמה של גופן אינטרנט, COLRv1 נדחס היטב ב-woff2. לדוגמה, גרסת build לבדיקה של Twemoji עם COLRv1 צורכת כ-1.2MB, אבל היא בנפח 0.6MB בפורמט woff2. ה-build של ה-build המלא של האמוג'י ב-Noto צומצם מ-9MB לגרסת מפת הסיביות ל-1.85MB בפורמט 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 של font-palette. צוות Chrome עובד על הוספת תמיכה ללוח צבעים ב-Chrome.
גופני COLRv1 ואתה
אם גופני COLRv1 מעניינים אתכם, תוכלו לשאול את ספק הגופנים לגבי גופן הצבע COLRv1 שבו תוכלו להשתמש בפרויקט, נסו את הדוגמאות וההדגמות שלמעלה, או למה לא להתנסות ישירות ולנסות ליצור גופן משלכם?
אם יש לכם משוב על COLRv1 ב-Chrome, תוכלו לפרסם אותו ברשימת התפוצה של blink-dev או לדווח על בעיה באתר המעקב אחר בעיות. אם יש לכם משוב על פורמט הגופן COLRv1 עצמו, דווחו על בעיה במאגר GitHub של מפרט COLRv1.
ב-Chrome 98, אנחנו נרגשים מהאופן שבו COLRv1 נותן לאינטרנט רמה חדשה לגמרי של יצירתיות טיפוגרפית.
מידע נוסף
אם ברצונך לקבל פרטים נוספים, יש לנו כמה מקורות מידע עבורך:
כדי לגלות איך COLRv1 פועל ואיך מיישמים אותו ב-Chrome, אפשר לצפות בשיחת הוועידה של Dominik ב-BlinkOn 15.
- כנס Unicode בינלאומי מס' 45: Vector Color Fonts, הרצאה מאת רודריק, פיטר קונסטבל ודומיניק רוטצ'ס (סרטון, פרטי השיחה)
- מהדר גופנים של ננו-אמוג'י, שמפיק גופני COLRv1 מתמונות SVG
- מאגר GitHub של Google Fonts ב-Google Fonts, מכיל גרסאות build עדכניות של אמוג'י Noto, Twemoji וגופנים לדוגמה נוספים
- התצוגה של די ג'ייR בגופן Bradley Initials (פתיחה של COLRv1)
- הכלי והספרייה של ChromaCheck כדי לזהות תכונות של טכנולוגיות גופנים זמינות של צבע
אישורים
תודה רבה לבדד אספהבוד, קוסימו לופו, פיטר קונסטבל, בן וגנר, ורנר למברג, דייב קרוסלנד, ולדימיר לבנטובסקי, ג'ונתן קיו, לורנס פני, כריס לילי, דייוויד ג'ונתן רוס, אנדרוור, ג'וסט ואן רוסום, רואל ניסקנס ורול ניסקנס.