במסמך הזה יש מידע טכני על מה שמתרחש את הסצנות כשמבקשים גופן אינטרנט באמצעות Google Fonts API.
המסמך הזה מספק גם מידע על התנהגות ספציפית לדפדפן.
אם אתם רוצים להשתמש רק ב-Fonts API, אין צורך לקרוא את הדף הזה. עם זאת, קריאת הדף הזה יכולה לעזור לכם לשפר את הביצועים של טעינת הדפים.
מהו שירות Google Fonts API?
כשדפדפן שולח בקשה לגיליון סגנונות של Fonts API (כפי שמצוין ב-
תג <link> בדף האינטרנט שלך), Fonts API מציג גיליון סגנונות שנוצר עבור
את סוכן המשתמש הספציפי שהגיש את הבקשה.
לדוגמה, בקשת Inconsolata מ-Firefox מחזירה את ה-CSS הבא:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
לעומת זאת, בקשה מ-Internet Explorer מחזירה:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
לאחר הורדת ה-CSS, הדפדפן מוריד את הגופן של הדפדפן.
התנהגות ספציפית לדפדפן
בקטע הזה מתוארת התנהגות ברירת המחדל של כל דפדפן בגופני אינטרנט. שימו לב אפשר לשלוט בהתנהגויות האלה באמצעות Web Font Loader
לרשימת הדפדפנים שנתמכים, אפשר להיכנס שאלות נפוצות
Google Chrome
Chrome יעבד את שאר הדף, אבל עד שהגופן ייטען, הוא יוצג רווח ריק במקום הטקסט בגופן.
Mozilla Firefox
דפדפן Firefox מציג קודם את הטקסט בגופן ברירת המחדל, ולאחר מכן מעבד מחדש את הטקסט הגופן לאחר שנטען. התנהגות זו נקראת "הבזק של הגדרות ללא עיצוב" text".
Apple Safari
שאר הדף יוצג ב-Safari, אבל עד שהגופן ייטען, הוא יוצג רווח ריק במקום הטקסט בגופן.
Microsoft Internet Explorer
Internet Explorer מעבד את שאר הדף, אבל עד שהגופן נטען, מוצג בו רווח ריק במקום הטקסט שמופיע בגופן.
באופן כללי, ההתנהגות של Internet Explorer עשויה להשתנות בהתאם למיקום. וקיום של אלמנטים שונים. אם רוצים לספק התנהגות עקבית בכל הדפדפנים, משתמשים ב-Web Font Loader עבור לדוגמה, אפשר לבחור לגרום לכל הדפדפנים להתנהג כמו Firefox.