שימוש בגופנים מותאמים אישית בדפי אינטרנט
תוכן טקסט תמיד היה פיסת אתרים חשובה, אבל בימים הראשונים של האינטרנט, מעצבים ומפתחים היו מוגבלים מאוד בשליטה הטיפוגרפית שהיו להם על דפי האינטרנט שלהם. זה כלל הגבלה של גופנים כי הם יכלו להשתמש באופן אמין באתרים שלהם. יש לך כנראה שמעו את המונח "אינטרנט גופנים בטוח" המוזכרים בעבר. זה התייחס קבוצה קטנה של גופנים שהיו מאוד סביר להיכלל במחשב של אדם, כלומר אם האתר השתמש באחד הגופנים האלה, זה היה הימור בטוח כי זה היה שניתנו כראוי על הדפדפן של אדם.
כיום, אנשי מקצוע באינטרנט יש שורה של גופנים חדשים ואפשרויות סוג לעבוד עם, אחד מהם הוא פורמט WOFF.
מה זה WOFF?
WOFF הוא ראשי תיבות המייצגים את "Web Open Font Format". הוא משמש לגופני גופנים לשימוש עם המאפיין CSS @ font-face. זוהי דרך להטביע גופנים בדפי אינטרנט, כך שתוכל להשתמש גופנים מיוחדים מעבר טיפוסי "אריאל, טיימס ניו רומן, ג'ורג'יה" - אשר כמה מן הגופנים בטוח באינטרנט כאמור לעיל.
WOFF הוגשה ל- W3C כסטנדרט לגופני אריזה עבור דפי אינטרנט. זה הפך טיוטה עובד ב 16 בנובמבר 2010. היום יש לנו למעשה WOFF 2.0, אשר משפר את הדחיסה מהגרסה הראשונה של הפורמט על ידי כמעט 30%. במקרים מסוימים, חיסכון אלה יכולים להיות אפילו יותר סובסטנציאלי!
מדוע להשתמש ב- WOFF?
גופני אינטרנט, כולל אלה הנשלחים באמצעות פורמט WOFF, מספקים יתרונות רבים על פני אפשרויות גופן אחרות. שימושי כמו אלה גופנים בטוח באינטרנט כבר, ויש בהחלט עדיין מקום עבור גופנים אלה בעבודה שלנו, זה נחמד גם להרחיב את הבחירות שלנו ולפתוח אופציות טיפוגרפיות שלנו.
לגופני WOFF יש את היתרונות הבאים:
- הם נגישים יותר מהגופנים כתמונות. WOFF סגנונות טקסט HTML רגיל עם CSS, נותן לך נגישות ושליטה העיצוב כי התמונות לא תאפשר.
- קובצי WOFF כוללים מידע טיפוגרפי כמו טפסים קונטקסטואליים ודמויות בסגנון ישן. זה נותן את דפי האינטרנט שלך טיפוגרפיה טובה יותר, כי אתה משתמש בתווים הנכונים, לא רק קירובים.
- גופני WOFF יכולים לסייע בבינאום משום שניתן להטביע גופנים עם תווים משפות אחרות.
- כמו כל טקסט CSS מנוסח, גופנים מנוסח עם WOFF יותר מנוע חיפוש ידידותי. מנועי החיפוש אינם "רואים" טקסט מוטבע בתמונה, ובעוד טקסט ALT יכול לעזור, אין תחליף לטקסט עצמו.
- גופני WOFF דחוסים, ולכן הם קטנים יותר מסוגים אחרים של קובצי גופנים. זה יעזור עם מהירות להוריד האתר ואת הביצועים הכוללים.
- ניתן להשתמש בקובצי WOFF כדי לשמור על זהות המותג שלך על ידי הטמעת גופני החברה שלך כקובצי WOFF.
WOFF דפדפן תמיכה
ל- WOFF יש תמיכה מצוינת בדפדפנים המודרניים, כולל:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- אופרה 11.1+
- ספארי 5.1+
זה נתמך למעשה על פני הלוח בימים אלה, עם חריג בודד להיות כל הגירסאות של אופרה מיני.
כיצד להשתמש גופני WOFF
כדי להשתמש בקובץ WOFF, עליך להעלות קובץ WOFF לשרת האינטרנט שלך, לתת לו שם באמצעות המאפיין @ font-face ולאחר מכן להתקשר לגופן ב- CSS שלך. לדוגמה:
- העלה את הגופן הנקרא myWoffFont.woff לספריית / fonts של שרת האינטרנט.
- בקובץ CSS שלך הוסף קטע @ font-face:
@סוג גופן {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') פורמט ('woff');
}
- הוסף את שם הגופן החדש (myWoffFont) לערימת גופן CSS שלך, כמו שכל שם גופן אחר:
p {
משפחת גופן: myWoffFont , ג'נבה, Arial, Helvetica, sans-serif;
}
איפה ניתן לקבל גופנים WOFF
ישנם שני מקומות גדולים אתה יכול למצוא הרבה גופני WOFF כי הם חופשיים לשימוש מסחרי ולא מסחרי:
- פתח את ספריית הגופנים
- סנאי גופן
אם יש לך רישיון להשתמש בגופן שאינו זמין בפורמט WOFF, באפשרותך להשתמש ביוצר WOFF כמו ב- Font Squirrel כדי להמיר את קובצי הגופנים לקובצי WOFF. יש גם כלי שורת פקודה בשם sfnt2woff כי אתה יכול להשתמש ב- Macintosh ו- Windows כדי להמיר גופני TrueType / OpenType שלך ל- WOFF.
הורד את בינארי המתאים למערכת שלך ולהפעיל אותו בשורת הפקודה (או מסוף) ופעל לפי ההוראות.
WOFF דוגמה
הנה כמה דוגמאות של קבצי WOFF: דף WOFF על HTML5 ב 24 שעות.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -7 / 11/17