Share
FOUT (en Flash of Unstyled Text) är det du ofta ser i det korta ögonblicket innan en webbläsare har haft chans att ladda och använda webbfonter. Typekit och Google Web Fonts erbjuder oss en väg runt detta olägenheter - här är ett snabbt tips för att förklara exakt hur.
Kredit går till Dan för detta, efter att hans senaste artikel påminde mig om WebFont Loader. Det är så användbart jag tänkte det var värt att kasta in ett snabbtips.
Vilken lämplig akronym (på nederländska betyder det fel). I alla fall, när du använder webbfonter, måste de laddas i din webbläsare som tillgångar (precis som bilder och skript) som kan ta en stund. I den här situationen ser din webbläsare på typsnittstapeln ...
kropp font-family: 'Oswald', Arial, sans-serif;
... för att bestämma vilken typsnitt som ska visas medan webbfonten (Oswald i detta exempel) gör sin resa. När webbfonten är tillgänglig kommer det sannolikt att bli en "blixt" eftersom nedgångstypen försvinner och det avsedda tecknet tar sin rättvisa plats. Inte idealisk.
Webfontloader-skriptet baserades tillsammans av Google och Typekit, och är tillgängligt som standard med båda sina tjänster.
Det lägger till klassnamn i element för att spegla statusen för alla webbfonter som laddas. Medan lastning sker sker detta:
Mer specifikt läggs klasser till för varje typsnitt i rörledningen (Droid Serif Normal 400 till exempel):
När processen är klar uppdateras dessa klasser:
Eller om det skulle uppstå problem med att ladda tillgångarna:
Dessa klasser ger oss stor flexibilitet när det gäller att bestämma vad en användare upplever vid vilken tidpunkt som helst i webblankettframställningen. Låt oss nu bygga ett exempel för att göra sakerna helt tydliga.
Okej, jag hoppade över ett steg, jag antar att du har ett HTML-dokument att arbeta med. Hämta källfilerna och du hittar en mapp som heter "demo-start-block". Öppna index.html inom den och du är bra att gå.
Gå vidare till Google Web Fonts och välj ett teckensnitt eller två för användning i ditt projekt.
När du har slagit "Lägg till i samling", gå ner till undersidan av din skärm och tryck "Använd" där du ser en sammanfattning av din samling hittills.
Normalt kan du välja att länka direkt till css-filen som lagras på Googles gigantiska servrar, klicka på JavaScript-fliken och kopiera det kod du har fått.
Google föreslår att du klistrar in det här stycket som första objektet efter öppnandet taggar - och med god anledning. Det är viktigt att det här skriptet får använda klassnamnen (vi talade om tidigare) så snart som möjligt för att bekämpa FOUT. Om du drog den här JavaScript efter allt annat på sidan, har fallback-tecknet fått chansen att sätta tillbaka sitt fula huvud ...
Här är mitt utdrag, säkert där det tillhör:
Låt oss tillämpa vår Boogaloo typsnitt på allt på sidan (jag går inte för stilpoäng här). Öppna upp css / styles.css och sparka saker med:
kropp font-family: 'Boogaloo', cursive;
Allt det faktiska @ font-face jiggery-pokery har behandlats på serversidan av Google - vi måste bara använda värdet enligt förutsättning.
Okej, vid denna tidpunkt ser du FOUT-effekten jag har slagit på ungefär så mycket (men visst * mycket * kortfattat). Om du vill se det tydligare, försök att lägga till hundratals typsnitt till din samling, vilket ska sakta ner sakerna ...
Accentsconagua
wf- * Det finns alla möjliga saker du kan göra för innehållet på din webbsida, för att specifikt återspegla läsningsstatus för typsnitt. Låt oss använda ett pseudo-element för att informera användarna om vad som händer.
Fortsätt vidare i våra styles.css, lägg till ett: efter pseudo-element till vår HTML samtidigt som det har en wf-loading-klass, som så:
.wf-loading: efter / * först upp måste vi definiera något innehåll * / innehåll: "loading fonts ..."; / * låt oss nu ge det några dimensioner, en bakgrundsfärg och placera den på sidan * / bredd: 100%; höjd: 100%; position: fast; topp: 0; vänster: 0; / * okej, så vad vill vi att vår etikett verkligen ska se ut? * / färg: # 135040; typsnittstorlek: 1.5em; font-weight: bold; linjehöjd: 20em; text-align: center;
Vi har väsentligen täckt hela sidan med en stor etikett, i kommentarerna i CSS bör klargöra vad som händer. Här är en skärmdump av vad du kan se medan teckensnittet laddas:
Naturligtvis, när teckensnittet har laddats, avlägsnas lastningsklasserna och ersätts med andra statuser. De :efter pseudo-element upphör att vara att avslöja sidan med din webbtyp som tillämpas. Ingen fel!
Effekten som vi just uppnår gör jobbet perfekt, men etiketten försvinner bara när teckensnittet är laddat, vilket plötsligt avslöjar innehållet nedan. Det kan vi säkert förbättra?
Frustrerande, övergångar på genererat innehåll är fortfarande svagt stödda, så vi kan inte lita på några knep där. Vad vi kan göra är att dölja allt sidinnehåll, överföra det i en gång -lastad klasser har tillämpats.
Prova detta. Bli av med alla stilar vi just gjort, placera detta längst upp i din css-fil:
.wf-loading * / * första saker först måste vi gömma allt, men kom ihåg att detta bara kommer att träda i kraft när laddningsskriptet har trätt i kraft. här döljer vi allt innehåll inom när den har klassen "wf-loading" * / opacitet: 0; kropp font-family: 'Boogaloo', cursive;
Denna lilla nugget kommer att gömma sig (genom att minska opacitet till 0) varje element inom html.wf-lastning. Det är den allra första regeln som gömmer allt innan FOUT äger rum.
Med innehållet dolt kan vi tillämpa en bakgrund till vårt html-element.
.wf-loading / * Här är en bakgrundsbild (vid en mer 723bytes) för att indikera någonting händer * / bakgrund: url ('... /images/ajax-loader.gif') no-repeat center center; / * bara för att se till att Elementet delar samma dimensioner som webbläsarfönstret när du laddar (och inte den potentiellt långsträckta sidan) * / Höjd: 100%; överflöde: gömd; Vi har använt en loader.gif genererad av ett av de många tillgängliga onlineverktygen. Självfallet, oavsett vilken bakgrund du väljer, ska den vara lätt. Det finns ingen anledning att försöka förinställa en typsnittfil på 20Kb genom att visa en grafik på 4Mb ...
Nu, om vi laddar vår sida är allt innehåll dolt, bortsett från html.wf-lastning med sin loader gif bakgrund. När teckensnittet laddas, kommer det gifet att försvinna.
Html-elementet har nu tilldelats andra klasser, så låt oss använda dem som tar tillbaka det osynliga innehållet:
.wf-aktiv *, .wf-inaktiv * / * lägg till några övergångseffekter för att återintroducera innehållet gradvis när teckensnitt är laddade * / -webkit-övergång: opacity 1s utmynning; -moz-övergång: opacitet 1s utmätning; -o-övergång: opacitet 1s utmynning; övergång: opacitet 1s utmätning;
Oavsett om teckensnittet var framgångsrikt eller obefintligt laddat måste vi se vårt innehåll igen. wf-lastning släpper ut greppet om noll opaciteten för alla element på sidan, så vi överför dem långsamt tillbaka in. Återigen, för att sakta ner det, försök att lägga till massor av teckensnitt (eller spela med klassnamnen i din webbläsares elementinspektör.) Teckensnitt är lagras också, så varje gång du testar det kan du behöva tömma webbläsarens cache.
Enkelt, men ändå effektivt. Min favorit typ av tips. Och möjligheterna är oändliga - hur skulle du föreslå att använda wf- * klasser?
Sist men inte minst kunde jag inte motstå denna preloader av Kontramax på dribbling. Det är lite tungt för våra syften, men vad hej!
