בלוג זה ידבר על השימוש בכלל CSS @font-face.
מהו CSS @font-face Rule?
הכלל @font-face ב-CSS משמש ליצירת גופנים מותאמים אישית עבור הפרויקטים שלנו. ניתן לטעון גופנים אלו מהשרת או מהגופנים המותקנים של המערכת.
כיצד להשתמש ב-CSS @font-face Rule?
התחביר לשימוש בכלל CSS @font-face מוזכר להלן:
@סוג גופן {
משפחת גופן : MyNewFont ;
src : כתובת אתר ( )
}
הכלל @font-face מוגדר על ידי ציון ערך במאפיין font-family וכתובת האתר הקשורה ממנה נמצא הגופן הזה כמאפיין src.
דוגמא
בדוגמה למטה, נתאים גופנים. כדי לעשות זאת, ראשית, הורד את הגופנים מהדפדפן והוסף אותם לתיקיה של הפרויקט שלך. אתה יכול גם להשתמש בקישורים אם אתה משתמש בגופנים מהשרת.
ראשית, הוסף תגיות
ו- ולאחר מכן החל להתאים אישית גופנים לכל אחד מהם. בואו ליישם את התרחיש המתואר לעיל בשלושה שלבים.
שלב 1: הוסף אלמנטים לקובץ HTML
שלב 1: הוסף אלמנטים לקובץ HTML
ב-HTML, בתוך הקטע
, הוסף ו- להוספת תוכן הקשור לדף האינטרנט:
< h2 > ברוכים הבאים ל- Linuxhint! < / h2 >
< h1 > ברוכים הבאים ל- Linuxhint! < / h1 >
שלב 2: ציין את ה-@font-face כלל ב-CSS
< h2 > ברוכים הבאים ל- Linuxhint! < / h2 >
< h1 > ברוכים הבאים ל- Linuxhint! < / h1 >
שלב 2: ציין את ה-@font-face כלל ב-CSS
כדי לציין את הכלל, מילת המפתח ' @סוג גופן 'מנוצל ב-CSS. בתוך הסוגריים המתולתלים שלו, הוסף את המאפיין font-family והוסף את שם הגופן כערך שלו. לאחר מכן, השתמש במאפיין src כדי לציין את נתיב כתובת האתר של הגופן שהורד:
@סוג גופן {
משפחת גופן : myfont ;
src : כתובת אתר ( '/fonts/Batuphat\ Script.otf' ) ;
}
באופן דומה, נוסיף עוד בלוק גופן מותאם אישית:
@סוג גופן {משפחת גופן : myfont2 ;
src : כתובת אתר ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
כעת, החל סגנון על האלמנטים
ו-.
סגנון h2 Element
h2 {
משפחת גופן : myfont ;
גודל גופן : 50 פיקסלים ;
}
סגנון h2 Element
h2 {משפחת גופן : myfont ;
גודל גופן : 50 פיקסלים ;
}
המאפיינים שהוחלו על האלמנט
מוסברים להלן:
- ' משפחת גופן ' מוגדר עם הערך ' myfont ” וזה מה שהצהרנו בכלל @font-face.
- ' גודל גופן ' מאפיין מגדיר את גודל הגופן ל-50px.
סגנון h1 Element
h1 {
משפחת גופן : myfont2 ;
גודל גופן : 70 פיקסלים ;
צֶבַע : חום ;
}
הנה ה ' צֶבַע 'מאפיין משמש לצביעת הגופן.
ניתן לראות מהתמונה המצורפת למטה שתגיות
ו- מעוצבות בהצלחה עם הגופנים החדשים שהוכרזו:
סיפקנו את השיטה לשימוש בכלל CSS @font-face.
סיכום
סגנונות גופנים ממלאים תפקיד חשוב בהפיכת כל יישום למושך מבחינה אסתטית. למערכת שלנו יש סגנונות גופנים מוגבלים, בעוד שמפתח זקוק לגופנים שונים כדי להוסיף ייפוי לאפליקציות האינטרנט שלו. לשם כך, CSS מאפשר לנו להשתמש בכלל @font-face להוספת גופנים מותאמים אישית. מאמר זה הדגים את הכלל @font-face שדרכו ניתן להתאים אישית את סגנון הגופן באפליקציה שלנו.