למה דפי אינטרנט מיד להציג את הטקסט שלהם?

אם אתה נוטה לצפות בחלונית הדפדפן עם עין נשר, ייתכן שהבחנת שדפים מעמיסים תכופות את התמונות ואת הפריסה שלהם לפני טעינת הטקסט - תבנית הטעינה ההפוכה המדויקת שחווינו במהלך שנות התשעים.מה קורה?

שאלה של היום &מפגש תשובה מגיע אלינו באדיבות SuperUser - חלוקה של סטאק שערי, קהילה מונחה קיבוץ של Q & אתרי אינטרנט.

השאלה

SuperUser הקורא לורן הוא מאוד סקרן לגבי למה בדיוק דפים נראה לטעון אלמנטים אחרת לגמרי מאשר הם עשו פעם.הוא כותב:

שמתי לב כי לאחרונה אתרים רבים איטיים להציג את הטקסט שלהם.בדרך כלל, את הרקע, תמונות וכן הלאה הולכים להיות נטען, אבל לא טקסט.לאחר זמן מה הטקסט מתחיל להופיע כאן ושם( לא תמיד את כל זה באותו זמן).

זה בעצם עובד ההפך כפי שהיה פעם, כאשר הטקסט הוצג הראשון, ולאחר מכן את התמונות ואת השאר היה טוען לאחר מכן.איזו טכנולוגיה חדשה יוצרת בעיה זו?רעיון כלשהו?

שים לב שאני על חיבור איטי, אשר כנראה מדגיש את הבעיה.

ראה [למעלה] לדוגמה - הכל טעון אבל זה לוקח עוד כמה שניות לפני הטקסט מוצג סוף סוף.

אז מה נותן?לורן, ורבים מאיתנו, זוכר את הזמן שבו הטקסט נטען הראשון וכל השאר - GIF אנימציה אנימציה, רקע רעפים, וכל שאר artifacts בסוף שנות ה -90 גלישה באינטרנט - הגיע מאוחר יותר.מה גורם למצב הנוכחי של האלמנטים עיצוב הראשון, טקסט מאוחר יותר?

התשובה

SuperUser תרומה דניאל אנדרסון מציעה תשובה מפורטת להפליא שמגיע ישר לתחתית של המסתורין- the- גופנים האחרון תעלומה:

סיבה אחת היא כי מעצבי אינטרנט כיום כמו להשתמש גופני אינטרנט( בדרך כלל בפורמט WOFF), למשלבאמצעות גופני אינטרנט של Google.

בעבר, הגופנים היחידים שניתן היה להציג באתר היו אלה שהמשתמש הותקן באופן מקומי.מאז למשלמשתמשי מקינטוש ו- Windows לא בהכרח יש את הגופנים אותו, מעצבים אינסטינקטיבית להגדיר תמיד הכללים כמו משפחת גופן

: Arial, Helvetica, sans-serif;

שבו, אם הגופן הראשון לא נמצא על המערכת, הדפדפן יחפש את השני, ולבסוף נסיגה "sans-serif" גופן.

עכשיו, אפשר לתת כתובת אתר של גופן בתור כלל CSS כדי לקבל את הדפדפן כדי להוריד גופן, ככזה:

@ url url( http: //fonts.googleapis.com/ css = family = Droid + Serif: 400,700);

ולאחר מכן לטעון את הגופן עבור אלמנט מסוים על ידי למשל:

משפחת גופן: 'Droid Serif', sans-serif;

זה מאוד פופולרי כדי להיות מסוגל להשתמש בגופנים מותאמים אישית, אבל זה גם מוביל לבעיה כי לא מוצג טקסט עד המשאב נטען על ידי הדפדפן, הכולל את זמן ההורדה, זמן טעינת גופן זמן לדקלם.אני מניח שזה הוא artifact כי אתה חווה.

כדוגמה: אחד העיתונים הלאומיים שלי, Dagens Nyheter, משתמש בגופני אינטרנט לכותרות שלהם, אבל לא מוביל שלהם, ולכן כאשר האתר נטען אני בדרך כלל רואה מוביל הראשון, וחצי שנייה מאוחר יותר את כל החללים הריקים הם מעלמאוכלס בכותרות( זה נכון ב- Chrome וב- Opera, לפחות לא ניסיתי אחרים).

( גם מעצבים מפזרים את ג'אווה סקריפט לחלוטין בכל מקום בימים אלה, אז אולי מישהו מנסה לעשות משהו חכם עם הטקסט, ולכן הוא מתעכב, אבל זה יהיה מאוד ספציפי לאתר: הנטייה הכללית לטקסט להתעכב באלה פעמים הוא סוג הגופנים אינטרנט שתוארו לעיל, אני מאמין.)

הוסף:

תשובה זו נעשתה מאוד upvoted, אם כי לא נכנסתי לפרטים רבים, או אולי בגלל של זה.היו תגובות רבות בחוט השאלה, אז אני אנסה להרחיב קצת [...]

התופעה היא כנראה ידוע בשם "פלאש של תוכן unstyled" בכלל, "הבזק של טקסט unstyled" בפרט.מחפש "FOUC" ו "FOUT" נותן מידע נוסף.

אני יכול להמליץ ​​על פוסט האינטרנט של פול איריש על FOUT בקשר עם גופני אינטרנט.

מה שניתן לראות הוא שדפדפנים שונים מטפלים בזה אחרת.כתבתי לעיל כי בדקתי את Opera ו- Chrome, שגם הם התנהגו בצורה דומה.כל אלה מבוססי WebKit( כרום, ספארי, וכו ') לבחור כדי להימנע FOUT ידי לא עיבוד טקסט גופן אינטרנט עם גופן חזרה במהלך הטעינה אינטרנט גופן תקופה. גם אם גופן האינטרנט הוא במטמון, שם יהיה להיות עיכוב לדקלם .יש הרבה הערות בנושא זה פתיל אומר אחרת וכי הוא שטוח שגוי כי גופנים במטמון מתנהגים ככה, אבל למשלמהקישור הנ"ל:

באיזה מקרים תקבלו

• TWF: הורדה והצגה של ttf מרוחק /otf/ woff
• האם: הצגת קובץ ttf במטמון /otf/ woff
• האם: הורדה והצגת נתונים מסוג ttf /otf/ woff
• : הצגת /otf/ קובץ מטמון /otf/ wdf
• לא יוצג: הצגת גופן שכבר מותקן ושמו בערימת הגופן המסורתית שלך
• לא: הצגת גופן המותקן ונקרא באמצעות הפקודה() המקומית() מיקום

מכיוון ש- Chrome מחכה עד שהסיכון של FOUT ייעלם לפני העיבוד, הדבר יביא לעיכוב.אשר כמות האפקט גלוי( במיוחד בעת טעינה מהמטמון) נראה תלוי בין היתר את כמות הטקסט שצריך להיות שניתנו ואולי גורמים אחרים, אבל במטמון לא לגמרי להסיר את האפקט.

אירי יש גם כמה עדכונים לגבי התנהגות הדפדפן כמו 2011-04-14 בתחתית ההודעה:

• פיירפוקס ( כמו של FFb11 ו FF4 סופי) כבר אין FOUT!ביסודו של דבר הטקסט הוא בלתי נראה במשך 3 שניות, ולאחר מכן הוא מביא בחזרה את הגופן חזרה.Webfont כנראה לטעון בתוך שלוש שניות למרות. .. בתקווה. .
• IE9 תומך WOFF ו TTF ו OTF( אם כי זה דורש הטבעה bitset דבר - בעיקר לשגות אם אתה משתמש WOFF). אף פעם! !!IE9 יש FOUT.:(
• Webkit יש תיקון מחכה לנחות כדי להציג טקסט חזרה לאחר 0.5 שניות.ההתנהגות זהה FF אבל 0.5s במקום 3.

אם זו שאלה שמטרתה מעצבים, אפשר ללכת בדרכים כדי למנוע סוגים אלהשל בעיות כמו webfontloader, אבל זה יהיה עוד שאלה.הקשר פול אירי הולך פירוט נוסף בעניין זה.האם יש משהו להוסיף את ההסבר? סאונד את ההערות.רוצה לקרוא תשובות יותר מ טק אחרים,הבנה מתוחכמים משתמשי Exchange? בדוק את הדיון דיון מלא כאן