מבוא
תכונת @font-face מ-CSS3 מאפשרת לנו להשתמש בגופנים מותאמים אישית באינטרנט בדרך נגישה, ניתנת לשינוי וניתנת להתאמה. אבל, ייתכן שתאמרו, "למה נשתמש ב- @font-face אם יש לנו Cufon, sIFR ומשתמשים בטקסט בתמונות?" כמה יתרונות לשימוש ב- @font-face עבור גופנים מותאמים אישית:
- יכולת חיפוש מלאה לפי חיפוש (
ctrl-F) - נגישות לטכנולוגיות מסייעות, כמו קוראי מסך
- הטקסט ניתן לתרגום באמצעות שירותי תרגום או תרגום בתוך הדפדפן.
- ל-CSS יש יכולת מלאה לשנות את התצוגה הטיפוגרפית:
line-height,letter-spacing,text-shadow,text-alignוסלקטורים כמו::first-letterו-::first-line
@font-face במהותו
ברמה הבסיסית ביותר, אנחנו מצהירים על גופן מותאם אישית חדש שמיועד מרחוק שישמש באופן הבא:
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
לאחר מכן, השתמשו בו:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
בהצהרת @font-face הזו, נשתמש במאפיין font-family כדי לתת שם לגופן באופן מפורש. זה יכול להיות כל דבר, בלי קשר לשם של הגופן. font-family: 'SuperDuperComicSans'; זה יכול להתאים, אבל אולי לא למוניטין שלך. בנכס src אנחנו מצביעים על המיקום שבו הדפדפן יכול למצוא את נכס הגופן. בהתאם לדפדפן, חלק מסוגי הגופנים החוקיים הם eot , ttf , otf , svg או URI של נתונים שמטמיע את כל נתוני הגופנים באופן מוטבע.
| otf ו-ttf | svg | woff | Eot | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5+ | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Chrome 4 | Chrome 0.3 | Chrome 5 | |
| Safari | 3.1 | 3.1 | ||
| אופרה | אופרה 10.00 | אופרה 9 | ||
| iOS | iOS 1 | |||
| Android | 2.2 |
כמובן, שום דבר אינו פשוט כפי שהוא אמור להיות. המגבלה הראשונית של הקוד שלמעלה הייתה שהוא לא הוצג EOT ל-IE 6-8. תחביר @font-face חסין בפני תבליטים הציע דרך לפתור את הבעיה הזו, ולאחר מכן גרסה מתקדמת.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
כבר גורם לך כאב ראש? אם אתם מעדיפים פשוט לטפל בזה במהירות, אפשר להשתמש ב-Font Squirrel generator – כלי שמפשט את התהליך כולו, לוקח את הגופן ומכינים את הווריאציות וה-CSS שלו עבורכם. היום מאוד חשוב להשתמש ב-Webfonts.
תמיכה בנייד?
דפדפן Safari לנייד תומך בגופני אינטרנט מסוג SVG נכון ל-iOS 3.1, ו-Android תומך ב-otf/ttf כמו בגרסה 2.2. אבל האם המשתמשים בנייד יקבלו חוויה טיפוגרפית משופרת זו? אני ממליץ לא. הסיבה העיקרית לכך היא האופן שבו WebKit מטפל בטקסט שממתין לגופן מותאם אישית באמצעות @font-face: הטקסט אינו נראה. לכן, אם החיבור לנייד בעל רוחב פס נמוך, המשתמשים לא יראו טקסט כלל עד לטעינה של כ-50,000 נתוני גופנים. צוות Webkit מחפש פתרון להפעלת גופן חלופי לאחר מספר שניות, אבל לא נראה לי שזה הוגן להעמיד את המשתמשים שלך במכשולים כאלה ביניכם לבין התוכן שלך.
שירותי Webfont
מספר שירותים אורזים את תכונת @font-face ב-API קל, ובדרך כלל מאפשרים לך להוסיף CSS או שורת סקריפט אחת ל-HTML ולהגדרות מסוימות, וזהו. רבים מהם כמו WebInk , Typekit ו-Fontslive יאפשרו לכם להשתמש בגופנים (לפעמים עד למכסת רוחב הפס) בתשלום חודשי. השימוש בשירותים האלו נוח מאוד למפתח המזדמן, ומוסר חלק מהסיבוכים של הצגת פתרון חוצה-דפדפנים
Google Font API מאפשר לכם להשתמש בקבוצה קטנה של גופנים ברישיון בחינם. לשם כך, צריך רק לקשר לגיליון סגנונות ולתת ל-Google לטפל בבעיות בדפדפנים שונים ובבעיות בביצועים. זו הדרך המהירה ביותר להתחיל בעבודה עם פונטים מסוג Webfont.
מציאת גופנים מקצועיים עבור @font-face
הפתעה נפוצה למעצבים היא שאם רכשת רישיון לשימוש בגופנים (למשל, לעיצוב גרפי), אין זה אומר שתוכל להשתמש בו ב- @font-face. רישיונות ל- @font-face (או להטמעה באינטרנט) נמכרים בדרך כלל בנפרד. קוראים את ההסכם בעיון, ואם יש לכם שאלות אפשר לפנות לצוות הגופנים. Fontspring הוא בוטיק גופנים שנמכרים בו מאות גופנים מקצועיים ואיכותיים, שכולם אושרו לשימוש עם @font-face. FontFont וחברות מפעל אחרות התחילו למכור ישירות רישיונות @font-face, אבל כרגע מטרגטים רק את WOFF ו-EOT, כך שלא נותר חלק גדול משוק הדפדפנים (אבל הוא מכווץ). חברות רבות יצרניות מוסיפות רישיונות Webfont לקטלוג שלהם, אבל אם אתם לא מוצאים את הגופן שבחרתם, אתם יכולים לפנות אליהם ולשאול על כך.
התמודדות עם FOUT
ההבזק של טקסט לא מעוצב הוא תופעה ב-Firefox וב-Opera, שרק מעצבי אתרים אוהבים. כאשר מחילים גופן מותאם אישית דרך @font-face, לפעמים מופיע זמן קצר במהלך טעינת הדף, שבו הגופן לא הורד עדיין ולא הוחל, ונעשה שימוש בגופן הבא במקבץ font-family. פעולה זו גורמת להבהוב של גופן אחר (בדרך כלל נראה פחות טוב) לפני השדרוג.
לצד Google Font API יש את WebFont Loader – ספריית JavaScript שהמטרה שלה היא לספק כמה קטעי תוכן (hooks) לאירועים ולהעניק לכם שליטה רבה על הטעינה. נבחן איך אפשר לגרום לדפדפנים אחרים לחקות את ההתנהגות של WebKit ולהסתיר את הטקסט החלופי בזמן שהגופן @font-face נטען.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
אם JavaScript מושבת, הטקסט יישאר גלוי כל הזמן, ואם יש שגיאות הגופן באופן כלשהו, הוא יחזור ל-serif בסיסי באופן בטוח. בינתיים, כדאי להשתמש באפשרות הזו כפתרון זמני, ורוב המומחים ב-Webfont מעוניינים להסתיר את הטקסט החלופי למשך 2-5 שניות ולאחר מכן לחשוף אותו. רוחב פס נמוך ומכשירים ניידים יפיקו תועלת רבה מפרק הזמן הזה. כמובן, Mozilla עומדת לתקן זאת בקרוב.
פתרון קל יותר אבל פחות יעיל הוא המאפיין font-size-adjust, שזמין כרגע רק ב-Firefox. כך תהיה לכם הזדמנות לנרמל את x-height במקבץ גופנים, ולהקטין את כמות השינוי הגלוי ב-FOUT. למעשה, מחולל סנאי הגופנים הוסיף עכשיו פיצ'ר שמציין את יחס גובה-ה-x של הגופנים שאתם מעלים, כך שניתן להגדיר במדויק את הערך font-size-adjust.
סיכום
Webfonts מספקים חופש במידה רבה למעצבים, ותכונות עתידיות כמו ליגטורות שיקול דעת וחלופות סגנוניות, יהיו להם הרבה יותר גמישות. נכון לעכשיו, תוכלו להרגיש בטוחים להטמיע את החלק הזה של CSS3 כי הוא מכסה 98% מהדפדפנים שנפרסו. צפייה מהנה!