גופנים קומפקטיים וידידותיים לדחיסת נתונים, עם וקטורים צבעוניים של כל מה שאוהבים בטעמים הדרגתיים.
ב-Chrome 98, צוותי Chrome ו-Fonts הוסיפו תמיכה ב-COLRv1 האבולוציה של פורמט הגופן COLRv0 שמיועד להפוך לגופנים צבעוניים של הוספת הדרגה, הרכבה ומיזוג, ושימוש חוזר משופר בצורות פנימיות לקובצי גופנים חדים וקומפקטיים שנדחסים היטב.
צבע עכשיו
באינטרנט, הטקסט בדרך כלל משורטט בצבע שצוין ב-CSS. הגופן
לא מגדירים צבע מסוים, הם רק מציינים את המיקום של הפיקסלים
ממוקם. בדרך כלל זה דבר טוב. CSS מאפשר למחבר לבחור באופן גמיש
צבע. אבל לפעמים גליף מכיל כמה צבעים יחד
מה זה אומר. לדוגמה, הדגל 
עם פסים בצבע כחול בהיר, ורוד ולבן, לא
להעביר את אותה משמעות אם הוא פשוט מצויר בצבע הטקסט הנוכחי.
כיום, אצל רוב המשתמשים, סמלי אמוג'י הם הגופנים היחידים שמוצגים בצבע אחד. סמלי אמוג'י
מופיעים בדרך כלל באינטרנט באמצעות גופן האמוג'י של המערכת או על ידי הוספת תמונות
(ויש לו סיבוכים משלו, 
). קובץ גדול
בגדלים שונים, במיוחד בגופנים צבעוניים המבוססים על מפת סיביות, התקשו להשתמש באינטרנט
גופנים לאמוג'י. באמצעות התמיכה ב-COLRv1, אנחנו מקווים לראות
שימוש בגופן צבע יצירתי באינטרנט ובמקומות אחרים.
הצגת הצבעים שלך
יצרנו כמה דוגמאות שתוכל לשחק איתן:
הנכסים לדוגמה מ-Google Fonts ששימשו בדוגמה זמינים Google Fonts Web API. אלו השמות לא רשומים בספרייה בכתובת fonts.google.com בתור הם יפעלו רק ב-Chrome מגרסה 98 ואילך, ויציגו עבודה ניסיונית.
עכשיו תוכלו ליצור גופן COLRv1 משלכם באמצעות כלים חינמיים וכלים בקוד פתוח. לבדיקה את מהדר הגופנים של nanoemoji שמאפשר לבנות גופן COLRv1 מתמונות מקור בפורמט SVG, ואז לנסות Chrome מגרסה 98 ואילך. רוצה לנסות ליצור טעם משלך ב-Bungee Spice? צבעים הדרגתיים באמצעות ההוראות האלה.
לדוגמה, תוכל לשנות את הגופן של Bungee Spice כך שיופיעו בהדרגתיות של כחול ואדום, באופן הבא:
צייץ את התוצאות אל @googlefonts 🙂 למה לא כדאי לנסות הדרגתי רדיאלי או מדורג?
חדש עם COLRv1
פורמט הגופן תומך במספר דרכים לתמיכה בצבע, כשבכל אחת יש תמיכה יחסי גומלין – אבל עד כה לא הניבו תוצאות טובות באינטרנט. (למידע נוסף על החסרונות, לצפייה בשיחת ועידה של Dominik של BlinkOn 15). Chrome 98 תומך ב-COLRv1, התפתחות של COLRv0. אנחנו מקווים השילוב של יכולות הגרפיקה והקבצים הקומפקטיים של COLRv1 יהפוך אותו בחירה טובה עבור תרחישים לדוגמה של גופנים צבעוניים. COLRv1 מוסיף הדרגתיות, להרכיב ולשלב, ולשפר לעשות שימוש חוזר בצורה פנימית כדי ליצור קבצים קומפקטיים עוד יותר.
ל-COLRv1 יש יכולת הבעה שווה בערך ל- SVG Native Plus מיזוג והרכבה נוספו למעלה. קיימים ארבעה סוגים של מילויים בצבעים: צבעים אחידים, הדרגתיות ליניאריות, רדיאליות באמצעות הדרגה של צבעים והדרגתיות של סריקה/קוניק. COLRv1 מאפשר למקם מחדש ולבצע טרנספורמציה רכיבי גליף באמצעות סדרה מלאה של אפשרויות תרגום, סיבוב, שקוף וקנה מידה וטרנספורמציות. בנוסף, הוא כולל תמיכה בווריאציות של גופנים ובשימוש חוזר הפורמטים הקיימים של הגדרת הצורה בגופן.
חשבו על האמוג'י של כדור הבדולח לדוגמה: הדגשות בצורת כוכב הן את אותה צורה אבל גדלים שונים, כלומר רק צורה אחת יכולה להיות ימוקמו מחדש ועושים בו שימוש חוזר ללא כפילויות בקובץ. הפורמט מאפשר לעשות שימוש חוזר בגליף מלא בגליף חדש, בלי שתצטרכו לקודד אותן צורות לכל גליף. דמיינו גופן צבע דקורטיבי עם קישוטים פרחוניים, שבהם אותן צורות פרחים ממוקמות על אותיות שונות באמצעות הפניה לגליפים הקיימים של צבע. לתרחיש לדוגמה של גופן אינטרנט, COLRv1 דוחס היטב מתחת ל-woff2. לדוגמה, גרסת build לבדיקה של Twemoji באמצעות COLRv1 לוקחת כ-1.2MB מנופחת, אבל בגודל של כ-0.6MB בפורמט woff2. 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 או בסוכן משתמש sniffing כדי לקבוע אם יש תמיכה ב-COLRv1. לאחר מכן אתם יכולים לשלוח שירות CSS שטוענים גופן COLRv1 בסוכני משתמש תומכים ומשתמשים בגופן חלופי כמו COLRv0, פורמט גופן של מפת סיביות (bitmap) או OpenType SVG בדפדפנים אחרים.
תמיכה בגופן גופנים ב-CSS
זה יהיה שימושי מאוד אם שימוש בקבוצת צבעים אחרת לא נדרש גופן חדש. למרבה המזל, קיים מנגנון: מאפייני CSS font-palette צוות Chrome עובד על הוספה תמיכה בבחירת גופנים ב-Chrome.
גופנים ו-COLRv1 עבורך
אם גופנים COLRv1 מעניינים אותך, אפשר לשאול את ספק הגופן על צבע COLRv1 הגופן הרצוי בפרויקט, כדאי לנסות את הדוגמאות וההדגמות או למה לא לצלול ישר ולהתנסות עם רוצה ליצור משהו משלך?
אם יש לך משוב על COLRv1 ב-Chrome, אפשר לפרסם אל blink-dev List, או לדווח על בעיה באתר המעקב אחר בעיות. אם יש לכם משוב בפורמט הגופן COLRv1 עצמו, מדווחים על בעיה מאגר GitHub של מפרט COLRv1.
עם Chrome 98, אנחנו מתרגשים איך COLRv1 מביא רמה חדשה לגמרי יצירתיות טיפוגרפית באינטרנט.
מידע נוסף
רוצה לקבל פרטים נוספים? יש לנו כמה מקורות מידע נוספים בשבילך:
כדי להבין איך COLRv1 פועל ואיך הוא מוטמע ב-Chrome, כדאי לצפות בשיחת הוועידה של Dominik ב-BlinkOn 15.
- כנס International Unicode מס' 45: גופנים וקטוריים בצבע, שיחה של רודריק שיטר, פיטר קונסטבל ודומיניק רוטצ'ס (סרטון, פרטי השיחה)
- ננו-אמוג'י, מפיק גופן COLRv1 מתמונות SVG
- Google Fonts מאגר גופנים צבעוניים ב-GitHub שכוללים גרסאות build נוכחיות של אמוג'י של Noto, Twemoji וגופנים לדוגמה אחרים
- התצוגה של די-ג'יי בגופן Bradley Primarys
- הכלי והספרייה של ChromaCheck כדי זיהוי תכונות זמינות של טכנולוגיות גופנים בצבע
אישורים
תודה רבה ל-Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemburg, Dave Crossland, ולדימיר לבנטובסקי, Jonathan Kew, Laurence Penney, כריס לילי (Chris Lilley), דייוויד ג'ונתן רוס (Subware), Just van Rossum, רואל ניסנס (Roel Nieskens) ו- אחרים על תרומתם ל-COLRv1.