שימוש ב-font-range לעיצוב תוים מסויימים

לפני כמה חודשים, נדב (ידי זהב :)) שלח לי קישור למאמר מדליק שמתאר איך לעצב תו מסוים בפונט שונה משאר האתר.

את @font-face אנחנו כבר מכירים, אבל את מהאפיין הלכאורה משמים שלו, unicode-range, פחות מכירים, ומתברר שהוא טומן בחובו אפשרויות מעניינות לשימוש יצירתי.

unicode-range מאפשר לציין את טווח קודי היוניקוד שעליהם יחול הפונט. כך אפשר לבחור להחיל פונט מסוים על אמפרסנד (&), אם רוצים לעצב, למשל, את האמפרסנד הכי יפה שיש.
@font-face { font-family: 'Ampersand';
src: local('Baskerville'), local('Palatino'), local('Book Antiqua');
unicode-range: U+26; }

אבל הדברים לא פשוטים, כמובן. ישנו עניין תאימות הדפדפנים. למרבה ההפתעה, הבן הסורר הפעם הוא לא אחר מאשר פיירפוקס!

לכאורה, הפתרון הוא פשוט – לתת הגדרה נוספת מתחת להגדרה שהוא לא מכיר, שתתן פונט fallback, והוא ידלג על הפונט הראשון וישתמש בשני. אלא שבמקרה הזה FF לא מתנהג כמו שדפדפן מתנהג כשהוא לא מכיר את המאפיין. בניגוד להתנהגות רגילה של דפדפן כשהוא מכיר מאפיין CSS, שהוא פשוט מתעלם ממנו, כאן זה פשוט גורם לו להחיל את הפונט הראשון על כל התוים באתר. המאמר נותן פתרון נחמד גם לזה, ובא לציון גואל.

הרעיון הוא לא דווקא להחיל פונט מיוחד על אמפרסנדים, אלא על כל טווח תוים שמעניין אותנו. המחבר נותן כדוגמה עיצוב שונה של ספרות (ואכן פעם היתה אצלנו מעצבת שרצתה שנעצב ספרות בגודל קצת יותר קטן מאותיות רגילות, אבל אז לא היינו מודעים ליכולות האלה של CSS), אבל אולי אפשר להרחיב את זה אצלנו לשוני פונט בין עברית לאנגלית. לא יודעת אם עיצובית זה רעיון טוב, אבל זה אפשרי… 🙂