גופנים וקטורים צבעוניים, קומפקטיים וקלים לדחיסה, עם כל גווני ההדרגציה האהובים עליכם.
ב-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
פורמט הגופן תומך בכמה דרכים להצגת צבע, כולן עם יתרונות וחסרונות שונים – אבל אף אחת מהן לא הצליחה עד כה באינטרנט. (לסקירה מפורטת יותר על הפשרות, כדאי לעיין בהרצאה של דומיניק בכנס BlinkOn 15). בגרסה 98 של Chrome נוספה תמיכה ב-COLRv1, גרסה מתקדמת יותר של COLRv0. אנחנו מקווים שהשילוב של יכולות גרפיות וקבצים קומפקטיים ב-COLRv1 יהפוך אותו לבחירה טובה לתרחישי שימוש רבים של גופנים צבעוניים. ב-COLRv1 נוספו אפשרויות של שילוב רכיבים ואיחוד שכבות, ואפשרות לשימוש חוזר בצורות פנימיות כדי ליצור קבצים קומפקטיים עוד יותר.
ל-COLRv1 יש יכולת הבעה שדומה בערך לזו של SVG Native, עם תוספת של מיזוג ויצירת קומפוזיציה. יש ארבעה סוגים של מילוי בצבע: צבעים מוצקים, מעברים לינאריים, מעברים רדיאליים ומעברים ספירליים/קוניים. באמצעות COLRv1 אפשר לשנות את המיקום של רכיבי הגליפים ולבצע בהם טרנספורמציות באמצעות קבוצה מלאה של טרנספורמציות של תרגום, סיבוב, הטיה וגודל. בנוסף, יש תמיכה באפשרויות שונות של גופנים ושימוש חוזר בפורמטים קיימים של הגדרת צורות בגופן.
לדוגמה, ניקח את אמוג'י כדור הקריסטל: הנקודות הבולטות בצורת כוכב הן באותה צורה אבל בגדלים שונים, כך שאפשר לשנות את המיקום של צורה אחת ולהשתמש בה שוב בלי כפילויות בקובץ. הפורמט מאפשר לעשות שימוש חוזר בגליף מלא בתוך גליף חדש, בלי צורך לקודד את אותם הצורות לכל גליף. נניח שרוצים ליצור גופן צבעוני מעוטר עם עיטורים צמחיים, שבו אותם צורות של פרחים ממוקמים על אותיות שונות, פשוט על ידי הפניה לגליפים צבעוניים קיימים. בתרחיש לדוגמה של גופן אינטרנט, ה-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 מאפשר להשתמש בקובץ גופן קומפקטי במקום בקטלוג של נכסי תמונה.
תארו לעצמכם כמה תמונות צריך לאחזר כדי ליצור בורר אמוג'י מלא!
צבע בגופנים של סמלים
שימוש בצבעים בגופנים של סמלים מוסיף בהירות ומקל על ההבנה של הגליפים.
ביטוי אומנותי
גופנים צבעוניים חסכוניים במקום מאפשרים צורות חדשות של ביטוי אמנותי בטקסט באינטרנט. בדוגמה הזו של גופן ערבי בסגנון Kufi נעשה שימוש בצבעים משתנים כפרשנות אומנותית של אופן זרימת הדיו בכתב קליגרפיה מסורתי, כשהוא מוחל על סגנון Kufi של כתב ערבי, שמקורו בכתיבה על אבן ולא בעט דיו.
זיהוי תכונות
בשלב זה, אפשר לבדוק אם מנוע דפדפן תומך בפורמט גופן צבע מסוים באמצעות ניטור של סוכן משתמש, או לחפש בספרייה כמו ChromaCheck של @PixelAmbacht כדי לבדוק את העיבוד של גליפים צבעוניים ב-Canvas. שני הפתרונות לא אופטימליים. בדיקת תכונות צריכה לזהות רק תכונה ספציפית בעצמה ולהימנע מרחרחת של סוכן משתמש. לא אמורה להיות צורך בספריית 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 עצמו, תוכלו לשלוח דיווח על בעיה במאגר של מפרט COLRv1 ב-GitHub.
ב-Chrome 98 אנחנו שמחים להציג את COLRv1, שמאפשרת לכם להציג באינטרנט רמה חדשה לגמרי של יצירתיות טיפוגרפית.
מידע נוסף
רוצים לקבל פרטים נוספים? יש לנו כמה מקורות מידע נוספים בשבילכם:
כדי להבין איך COLRv1 פועל ואיך הוא מוטמע ב-Chrome, כדאי לצפות בהרצאה של דומיניק בכנס BlinkOn 15.
- כנס Unicode הבינלאומי מס' 45: גופנים צבעוניים וקווים וקטורים, הרצאה של רודריק שיטאר (Roderick Sheeter), פיטר קונסטבל (Peter Constable) ודומיניק רוטשס (Dominik Röttsches) (סרטון, פרטי ההרצאה)
- מתקן גופנים של nanoemoji, שמייצר גופנים מסוג COLRv1 מתמונות SVG
- מאגר הגופנים הצבעוניים ב-GitHub של Google Fonts, שמכיל גרסאות build עדכניות של Noto Emoji, 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.