מבוא
התכונה @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 | ||
| אופרה | Opera 10.00 | Opera 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 – כלי שמפשט את התהליך כולו, לוקח את הגופן ומכין בשבילכם את הווריאציות וה-CSS שלו. הוא חיוני להטמעה של גופנים באינטרנט בפועל.
תמיכה בנייד?
דפדפן Safari לנייד תומך בגופנים גרפיים מסוג SVG החל מגרסה 3.1 של iOS, ו-Android תומך ב-otf/ttf החל מגרסה 2.2. אבל האם המשתמשים בניידים צריכים לקבל את חוויית הטיפוגרפיה המשופרת הזו? לא מומלץ לעשות זאת. הסיבה העיקרית לכך היא האופן שבו WebKit מטפל בטקסט שממתין לגופן בהתאמה אישית באמצעות @font-face: הטקסט לא גלוי. לכן, בחיבור נייד עם רוחב פס נמוך, המשתמשים לא יראו טקסט בכלל עד שנתוני הגופן (כ-50,000) יטענו. צוות Webkit מחפש פתרון להפעלת גופן חלופי אחרי שפג תוקף של כמה שניות, אבל עד שהפתרון הזה יהיה מוכן, לא נראה לי הוגן לגרום למשתמשים שלך להיתקל בחסמים כאלה בדרך אל התוכן שלך.
שירותי Webfont
יש כמה שירותים שמארזים את התכונה @font-face בממשק API פשוט, ולרוב אפשר להוסיף שורת CSS או סקריפט אחת ל-HTML ולהגדרות מסוימות, וזהו. שירותים רבים כמו WebInk, Typekit ו-Fontslive יאפשרו לכם להשתמש בגופנים (לפעמים עד למגבלת רוחב פס) בתשלום חודשי. השימוש בשירותים האלה נוח מאוד למפתחים לא מקצועיים, והוא מאפשר להם להימנע מחלק מהמורכבויות של הצגת פתרון בכמה דפדפנים.
Google Font API מאפשר לכם להשתמש בקבוצה קטנה ומסודרת של גופנים ברישיון ללא תשלום. כל מה שצריך לעשות הוא לקשר לגיליון סגנונות ולאפשר ל-Google לטפל בבעיות שקשורות לדפדפנים שונים ולביצועים. זו הדרך המהירה ביותר להתחיל להשתמש בגופנים באינטרנט.
חיפוש גופנים מקצועיים ל- @font-face
מעצבים רבים מופתעים לגלות שרכישת רישיון גופן (לשימוש בעיצוב הגרפי, למשל) לא מאפשרת להם להשתמש בו ב- @font-face. בדרך כלל, רישיונות ל-@font-face (או להטמעה באתר) נמכרים בנפרד. קוראים בעיון את ההסכם, ופונים למפעל הגופנים אם יש שאלות. Fontspring היא חנות גופנים שמוכרת מאות גופנים מקצועיים באיכות גבוהה, וכולם מותרים לשימוש עם @font-face. FontFont וחברות אחרות התחילו למכור רישיונות @font-face ישירות, אבל כרגע הן מטרגטות רק את הפורמטים WOFF ו-EOT, כך שחלק גדול (אבל קטן יותר) של שוק הדפדפנים לא נכלל. הרבה פורמטים של גופנים מוסיפים רישיונות של גופנים לאינטרנט לקטלוג שלהם, אבל אם לא מצאתם רישיון לגופן שבחרתם, תוכלו לפנות אליהם ולשאול.
טיפול ב-FOUT
הבהוב של טקסט ללא עיצוב הוא תופעה ב-Firefox וב-Opera שרק מעטים ממעצבי האינטרנט אוהבים. כשמחילים סוג אות מותאם אישית באמצעות @font-face, יש רגע קצר, בזמן טעינת הדף, שבו הגופן עדיין לא הוריד והופעל, והמערכת משתמשת בגופן הבא ב-stack font-family. כתוצאה מכך, לפני השדרוג יוצג אות מהבהבת בגופן אחר (בדרך כלל פחות אסתטי).
Google Font API מגיע עם WebFont Loader, ספריית JavaScript שמטרתה לספק מספר אירועי הוק (hook) שמעניקים לכם שליטה רבה על הטעינה. נראה איך אפשר לגרום לדפדפנים אחרים לחקות את ההתנהגות של 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 בסיסי ללא בעיה. נכון לעכשיו, זוהי פתרון זמני. רוב המומחים בתחום הגופנים לאינטרנט ממליצים להסתיר את הטקסט החלופי למשך 2-5 שניות ואז לחשוף אותו. מכשירים ניידים ומכשירים עם רוחב פס נמוך נהנים מאוד מזמן הקצאת הזמן הזה. מובן ש-Mozilla תנסה לתקן את הבעיה בקרוב.
פתרון קל יותר אך פחות יעיל הוא הנכס font-size-adjust, שנתמך כרגע רק ב-Firefox. כך תוכלו לנרמל את גובה ה-x בסטאק הגופנים, וכך לצמצם את כמות השינוי הגלוי ב-FOUT. למעשה, הגנרטור של Font Squirrel הוסיף לאחרונה תכונה שמציגה את יחס גובה ה-x של הגופנים שאתם מעלים, כדי שתוכלו להגדיר במדויק את הערך של font-size-adjust.
סיכום
גופנים באינטרנט מעניקים למעצבים הרבה חופש, ועם תכונות עתידיות כמו ליגטורים שרירותיים וחלופות סגנוניות, הם ייהנו מגמישות רבה יותר. בינתיים, אפשר ליישם את החלק הזה של CSS3 בבטחה, כי הוא מכסה 98% מהדפדפנים שנפרסו. שיהיה לך כיף!