גופנים וקטורים צבעוניים, קומפקטיים וקלים לדחיסה, עם כל גווני ההדרגציה האהובים עליכם.
ב-Chrome 98, צוות Chrome וצוות הגופנים הוסיפו תמיכה ב-COLRv1, דור חדש של פורמט הגופן COLRv0 שנועד להרחיב את השימוש בגופנים צבעוניים על ידי הוספת מעברים צבעוניים, שילוב וערבוב, ושיפור של שימוש חוזר בצורות פנימיות ליצירת קובצי גופנים חדים וקומפקטים שניתן לדחוס אותם בקלות.
צבע עכשיו
באינטרנט, הטקסט בדרך כלל מצויר בצבע שצוין ב-CSS. הגופן לא מגדיר צבע מסוים, הוא רק מציין איפה צריך למקם את הפיקסלים. בדרך כלל זה דבר טוב. CSS מאפשר לכותב לבחור צבע בצורה גמישה. עם זאת, לפעמים לגליף יש כמה צבעים שיש להם משמעות יחד. לדוגמה, הדגל הזה 
עם פסים כחולים בהירים, ורוד ולבנים לא יעביר את אותו משמעות אם הוא פשוט יופיע בצבע הטקסט הנוכחי.
כיום, רוב המשתמשים רואים רק סמלי אמוג'י כגופנים צבעוניים. בדרך כלל, סמלי אמוג'י מופיעים באינטרנט באמצעות גופן האמוג'י של המערכת, או על ידי הוספת תמונות (עם הבעיות שלה, 
). גודל הקובץ הגדול, במיוחד של גופנים צבעוניים מבוססי-בימפט, מקשה על השימוש בגופנים באינטרנט לצורך הצגת אמוג'י. אנחנו מקווים שהתמיכה ב-COLRv1 תעודד שימוש נרחב בגופנים צבעוניים באינטרנט ובמקומות אחרים.
Show me your colors
יצרנו כמה דוגמאות שתוכל לשחק איתן:
נכסי הדוגמה מ-Google Fonts שנעשה בהם שימוש בדוגמה זמינים ב-Google Fonts web API. הגופנים האלה לא מופיעים בספרייה בכתובת fonts.google.com כי הם פועלים רק ב-Chrome בגרסה 98 ואילך, והם מיועדים להצגת עבודות ניסיוניות.
עכשיו אפשר ליצור גופנים משלכם בפורמט COLRv1 באמצעות כלים בחינם בקוד פתוח. כדאי לבדוק את ה-compiler של גופן nanoemoji, שמאפשר ליצור גופנים מסוג COLRv1 מתמונות מקור בפורמט SVG, ואז לנסות אותם ב-Chrome 98 ואילך. אתם יכולים ליצור גרסה משלכם של Bungee Spice על ידי שינוי צבעים של העברה מדורגת לפי ההוראות האלה.
לדוגמה, אפשר לשנות את הגופן Bungee Spice כך שיהיה לו שיפוע כחול ואדום, כך:
אפשר לפרסם את התוצאות בטוויטר ל-@googlefonts 🙂 למה לא לנסות שיפוע רדיאלי או שיפוע שטוח?
חדש ב-COLRv1
פורמט הגופן תומך במספר דרכים לתמיכה בצבעים, כל אחת עם תוצאות שונות – אבל אף אחת מהן לא הצליחה עד כה באינטרנט. (כדי לקבל מידע נוסף על ההשלכות האלה, כדאי לעיין בשיחת הוועידה של Dominik של BlinkOn 15). בגרסה 98 של Chrome נוספה תמיכה ב-COLRv1, גרסה מתקדמת יותר של COLRv0. אנחנו מקווים שהשילוב של יכולות גרפיות וקבצים קומפקטיים ב-COLRv1 יהפוך אותו לבחירה טובה לתרחישי שימוש רבים של גופנים צבעוניים. COLRv1 מוסיף הדרגתיות, הרכבה ומיזוג, ומשפר את השימוש חוזר בצורה פנימית כדי ליצור קבצים קומפקטיים עוד יותר.
ל-COLRv1 יש יכולת הבעה שדומה בערך לזו של SVG Native, עם תוספת של מיזוג ויצירת קומפוזיציה. יש ארבעה סוגים של מילוי בצבע: צבעים מוצקים, מעברים לינאריים, מעברים רדיאליים ומעברים ספירליים/קוניים. בעזרת COLRv1 אפשר לשנות את המיקום של רכיבי גליף באמצעות סדרה מלאה של טרנספורמציות תרגום, סיבוב, שיפוע והתאמה לעומס (scaling). בנוסף, הוא תומך באפשרויות שונות של גופנים ומאפשר שימוש חוזר בפורמטים קיימים של הגדרת צורות בגופן.
לדוגמה, ניקח את אמוג'י כדור הקריסטל: הנקודות הבולטות בצורת כוכב הן באותה צורה אבל בגדלים שונים, כך שאפשר לשנות את המיקום של צורה אחת בלבד ולהשתמש בה שוב בלי כפילות בקובץ. הפורמט מאפשר להשתמש שוב בגליף מלא בגליף חדש, בלי שתצטרכו לקודד יותר מדי צורות עבור כל גליף. נניח שרוצים ליצור גופן צבעוני מעוטר עם עיטורים צמחיים, שבו אותם צורות של פרחים ממוקמים על אותיות שונות, פשוט על ידי הפניה לגליפים צבעוניים קיימים. בתרחיש לדוגמה של גופן אינטרנט, הנתונים של COLRv1 דחוסים הרבה יותר מאשר ב-woff2. לדוגמה, גרסה זמנית לבדיקה של Twemoji באמצעות COLRv1 תופסת כ-1.2MB אחרי הנפחה, אבל היא תופסת כ-0.6MB בפורמט woff2. גרסה של קבוצת הגליפים המלאה של Noto Emoji קטנה מ-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 לבצע פעולות מרובדות משאבים של קנבס 2D כדי לקבוע את התמיכה.
צוות Chrome רוצה לשפר את המצב, והתחיל סדרה של דיונים [1, 2] בקבוצת העבודה של CSS כדי לספק מידע על התמיכה בטכנולוגיית גופנים בדפדפנים ב-JavaScript וב-CSS באופן מצהיר. הצוות מתכנן להשיק זיהוי יעיל של תכונות לגופן צבעוני ולטכנולוגיות גופן אחרות בגרסה עתידית של Chrome.
אם אתם רוצים להשתמש בגופנים צבעוניים בפרויקט שלכם כרגע, כשהתמיכה ב-COLRv1 מוגבלת ל-Chrome, יש שתי דרכים לעשות זאת: תוכלו לבקש מהספק של הגופן גופן COLRv1 שמכיל גם גליפים מונוכרום. סוכנויות משתמשים שלא תומכות ב-COLRv1 יחזרו לעיבוד גליפים מונוכרום. לחלופין, ניתן להשתמש בספריית ChromaCheck או בסוכן משתמש לסריקת סוכן משתמש כדי לבדוק אם יש תמיכה ב-COLRv1. לאחר מכן, שולחים קובץ CSS שמטעין גופנים מסוג COLRv1 בסוכני משתמשים נתמכים, ומשתמשים בפורמט גופן חלופי כמו COLRv0, פורמט גופן בפורמט בייטמאפ או OpenType SVG בדפדפנים אחרים.
תמיכה ב-CSS font-palette
יהיה שימושי מאוד אם שימוש בקבוצת צבעים אחרת לא ידרוש גופן חדש. למרבה המזל, יש מנגנון: הנכס font-palette ב-CSS. צוות Chrome עובד על הוספת תמיכה ב-font-palette ב-Chrome.
גופנים מסוג COLRv1 ואתם
אם הגרפיקה של גופנים מסוג COLRv1 מעניינת אתכם, תוכלו לשאול את ספק הגופנים אם יש לו גופן צבע COLRv1 שאפשר להשתמש בו בפרויקט, לנסות את הדוגמאות והדמואים שלמעלה או פשוט להתחיל לעבוד ולנסות ליצור גופן משלכם.
אם יש לכם משוב על COLRv1 ב-Chrome, תוכלו לפרסם אותו ברשימת התפוצה blink-dev או לדווח על בעיה במעקב הבעיות שלנו. אם יש לכם משוב על פורמט הגופן COLRv1 עצמו, אתם יכולים לדווח על בעיה במאגר GitHub של מפרט COLRv1.
ב-Chrome 98 אנחנו שמחים להציג את COLRv1, שמאפשרת לכם להציג באינטרנט רמה חדשה לגמרי של יצירתיות טיפוגרפית.
מידע נוסף
רוצים לקבל פרטים נוספים? יש לנו עוד כמה מקורות מידע בשבילכם:
כדי להבין איך COLRv1 פועל ואיך הוא מוטמע ב-Chrome, כדאי לצפות בשיחת הוועידה של Dominik ב-BlinkOn 15.
- כנס Unicode הבינלאומי מס' 45: גופנים צבעוניים וקווים וקטורים, הרצאה של רודריק שיטאר (Roderick Sheeter), פיטר קונסטבל (Peter Constable) ודומיניק רוטשס (Dominik Röttsches) (סרטון, פרטי ההרצאה)
- מתקן גופנים של nanoemoji, שיוצר גופנים מסוג COLRv1 מתמונות SVG
- מאגר GitHub של Google Fonts שמכיל גרסאות build עדכניות של Noto אמוג'י, Twemoji וגופנים לדוגמה אחרים
- הדגמה של DJR לגופן Bradley Initials, עם התכונה COLRv1
- הכלי והספרייה של ChromaCheck לזיהוי טכנולוגיות זמינות של גופנים בצבע
תודות
תודה רבה ל-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 ואחרים על התרומות שלהם ל-COLRv1.