בפיתוח אתרים, שימוש נכון בעיצוב גופנים מספק מראה אטרקטיבי לאפליקציה. סגנונות גופנים אלה נותנים רמזים חזותיים לגבי סדר הקריאה של המסמך. לדוגמה, סגנון הגופן של כותרת המסמך חייב להיות מודגש ומשמעותי מאחרים. הסטיילינג גם עוזר להבחין בין תוכן חשוב מאחרים.
תוצרי הלמידה של מאמר זה הם:
מהם גופני האינטרנט של גוגל?
גופן האינטרנט של גוגל הוא ספריית קוד פתוח המכילה מאות סגנונות גופנים או משפחות. הוא גם מספק ממשקי API שעוזרים לנו להשתמש בגופני אינטרנט עם אנדרואיד ו-CSS. גופנים של Google הם הרבה יותר קלים מספריות גופנים אחרות וזמינים בחינם לשימוש עסקי. קל יותר ליישם אותם בכל אתר אינטרנט.
כברירת מחדל, CSS מציע סגנונות גופנים פנטזיה, סריף, ללא סריף, קורסיב ומונו-ספייס. ניתן להשתמש בגוגל גופנים אם אתה רוצה להשתמש בסגנונות גופנים אחרים.
כיצד לייבא גופנים של גוגל ב-HTML?
כדי להשתמש בגוגל גופנים בדף HTML, עברו על השלבים הבאים.
שלב 1: בחר את משפחת הגופנים
ראשית, פתח את ה גוגל גופנים האתר הרשמי ובחר את הגופן שאתה אוהב. לדוגמה, בחרנו את ' לובסטר שני ' משפחת גופן:
שלב 2: בחר את הסגנונות
לאחר מכן, גלול מטה כדי להציג את רשימת הסגנונות. הוסף אותם לאוסף שלך על ידי לחיצה על ' + ' סימן:
שלב 3: הצג משפחות נבחרות
לצפייה במשפחות שנבחרו, לחץ על הסמל המודגש להלן:
שלב 4: העתק קישור להטמעה ב-HTML
לאחר מכן, גלול מטה והעתק את הקישור של משפחת הגופנים באמצעות הסמל המודגש ' עותק ' סמל:
כיצד להשתמש בגוגל גופנים בקובץ CSS?
כדי להשתמש בעותק של גוגל גופנים ב-CSS לעיצוב, עברו על הדוגמאות הנתונות.
דוגמה 1
כלול ' ' רכיב כדי לציין תוכן או פסקה כלשהי:
< ע > 'אתר ההדרכה הטוב ביותר' ע >כדי לייבא את הגוגל גופנים, הדבק את הקוד שהועתק ב' <סגנון> 'תג של קובץ ה-HTML:
@ ייבוא כתובת אתר ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;סגנון 'p' אלמנט
ע {משפחת גופן: 'לובסטר שני' , קורסיבי;
יישור טקסט: מרכז;
גודל גופן: 45px;
צבע: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
מאפייני ה-CSS המפורטים להלן מוחלים על ה-HTML ' 'תג:
- ' משפחת גופן ' מוקצה עם הערך ' 'לובסטר שני', קורסיבי '. משפחת גופנים זו מיובאת מגוגל גופנים.
- ' יישור טקסט ' מתאים את יישור הטקסט.
- ' גודל גופן ' קובע את גודל הגופן.
- ' צֶבַע ' מגדיר את צבע הגופן.
התמונה מראה שמשפחת הגופנים הוחלה בהצלחה:
דוגמה 2
ניקח דוגמה נוספת לייבא את ה' נרקו אחת 'גוגל גופן. למטרה זו, הדבק שוב את הקוד עבור כתובת האתר של גופן Google 'Nerko One' ב-' <סגנון> ' אלמנט:
@ ייבוא כתובת אתר ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;סגנון 'p' אלמנט
ע {משפחת גופן: 'נרקו וואן' , קורסיבי;
משקל גופן: 300 ;
גודל גופן: 30px;
}
ה ' משפחת גופן ', ' משקל גופן ', ו' גודל גופן מאפיינים מוחלים על ה-HTML ' אלמנט.
תְפוּקָה
לימדנו אותך כיצד לייבא גופני אינטרנט של גוגל בקובץ ה-CSS.
סיכום
כדי לייבא גופנים של גוגל ב-CSS, בקר תחילה ב- גוגל גופנים האתר הרשמי ובחר את סגנון הגופן. לאחר מכן, העתק את הקוד המכיל את ' @יְבוּא ' מילת מפתח והדבק אותה בקובץ ה-CSS או ב' <סגנון> ' רכיב של קובץ ה-HTML. מחקר זה הדגים את ההליך המלא של ייבוא גוגל גופנים לקובץ CSS.