Share
FOUT (een flits van niet-gestileerde tekst) is wat je vaak zult zien in dat korte moment voordat een browser de kans kreeg om weblettertypen te laden en toe te passen. Typekit en Google Web Fonts bieden ons een manier om dit ongemak op te lossen - hier is een korte tip om precies uit te leggen hoe.
Er gaat hiervoor geld naar Dan, nadat zijn recente artikel me deed denken aan de WebFont Loader. Het is zo handig dat ik dacht dat het de moeite waard was om in een snelle fooi te gooien.
Wat een geschikt acroniem (in het Nederlands betekent het fout). Als u weblettertypen gebruikt, moeten ze in elk geval als activa (net als afbeeldingen en scripts) in uw browser worden geladen, wat even kan duren. In deze situatie kijkt uw browser naar de lettertypestapel ...
lichaam font-family: 'Oswald', Arial, sans-serif;
... om te bepalen welk lettertype moet worden weergegeven terwijl het weblettertype (Oswald in dit voorbeeld) zijn reis aflegt. Zodra het weblettertype beschikbaar is, is er waarschijnlijk een 'flash' als het fallback-lettertype verdwijnt en het bedoelde lettertype de juiste plaats inneemt. Niet ideaal.
Het script voor de webfontloader is samengevoegd door Google en Typekit en wordt standaard beschikbaar gemaakt voor beide services.
Het voegt klassenamen toe aan de element om de status weer te geven van webfonts die worden geladen. Tijdens het laden wordt dit toegepast:
Meer specifiek worden klassen toegevoegd voor elk lettertype in de pijplijn (bijvoorbeeld Droid Serif Normal 400):
Zodra het proces is voltooid, worden deze klassen bijgewerkt:
Of in het geval van een probleem bij het laden van de items:
Deze klassen bieden ons een grote flexibiliteit bij het bepalen wat een gebruiker op een bepaald punt in het renderingproces van het weblettertype ervaart. Laten we nu een voorbeeld bouwen om alles duidelijk te maken.
Ok, ik heb een stap overgeslagen, ik neem aan dat je een html-document hebt om mee te werken. Download de bronbestanden en je zult een map vinden met de naam "demo-startblok". Open hierin de index.html en je bent klaar om te gaan.
Ga naar Google Web Fonts en selecteer een of twee lettertypen voor gebruik in uw project.
Zodra je "Toevoegen aan verzameling" hebt geraakt, ga je naar de onderkant van je scherm en klik je op "Gebruik" waar je tot nu toe een samenvatting van je verzameling ziet.
Terwijl u normaal gesproken kunt kiezen om rechtstreeks naar het CSS-bestand te linken dat is opgeslagen op de gigantische servers van Google, klikt u op het tabblad JavaScript en kopieert u het fragment dat u heeft gekregen.
Google stelt voor dat u dit fragment als eerste item na de opening plakt tag - en met goede reden. Het is belangrijk dat dit script de klassennamen zo snel mogelijk toepast (we hebben het eerder gehad) om FOUT te bestrijden. Als je dit JavaScript hebt ingetikt na al het andere op de pagina, krijgt het fallback-lettertype de kans om zijn lelijke kop op te steken ...
Hier is mijn fragment, veilig waar het hoort:
Laten we ons Boogaloo-lettertype toepassen op alles op de pagina (ik ga hier niet voor stijlpunten). Open css / styles.css en schop dingen af met:
body font-family: 'Boogaloo', cursief;
Alle echte @ font-face jiggery-pokery is door Google aan de server-kant behandeld - we moeten gewoon de waarde gebruiken zoals voorzien.
Oké, op dit punt zie je het FOUT-effect waar ik zo vaak over heb gebonsd (hoewel toegegeven * zeer * kort). Als je het duidelijker wilt zien, probeer dan honderden lettertypen aan je verzameling toe te voegen, dat zou de dingen vertragen ...
Accentsconagua
wf- * Er zijn allerlei dingen die u zou kunnen doen met de inhoud van uw webpagina, om specifiek de laadstatus van het lettertype te weerspiegelen. Laten we een pseudo-element gebruiken om gebruikers te informeren wat er aan de hand is.
Ga verder in onze styles.css en voeg een: after pseudo-element toe aan onze HTML terwijl het een wf-laadklasse heeft, zoals:
.wf-laden: na / * eerst moeten we wat inhoud * / inhoud definiëren: "laden van lettertypen ..."; / * laten we het nu een aantal dimensies geven, een achtergrondkleur en deze op de pagina plaatsen * / width: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; / * Oké, dus hoe willen we dat ons label er daadwerkelijk uitziet? * / color: # 135040; font-size: 1.5em; lettertype: vet; regelhoogte: 20em; text-align: center;
We hebben in essentie de hele pagina bedekt met een enorm label, de opmerkingen in de CSS moeten duidelijk maken wat er aan de hand is. Hier is een screenshot van wat u kunt zien terwijl het lettertype wordt geladen:
Nadat het lettertype is geladen, worden de laadklassen natuurlijk verwijderd en vervangen door andere statussen. De :na pseudo-element houdt op te bestaan, waardoor de pagina met uw gebruikte weblettertype wordt onthuld. Geen FOUT!
Het effect dat we net hebben bereikt, doet zijn werk perfect, maar het label verdwijnt zodra de lettertypen zijn geladen en geeft abrupt de onderliggende inhoud weer. We kunnen dat zeker verbeteren?
Frustrerend genoeg worden overgangen op gegenereerde inhoud nog steeds zwak ondersteund, zodat we niet kunnen vertrouwen op eventuele trucs daar. Wat we kunnen doen, is alle pagina-inhoud verbergen, deze overzetten zodra de -loaded klassen zijn toegepast.
Probeer dit. Verwijder alle stijlen die we zojuist hebben gemaakt en plaats deze helemaal bovenaan in je CSS-bestand:
.wf-laden * / * eerste dingen eerst, we moeten alles verbergen, maar onthoud dat dit pas effect zal hebben als het loading-script effect heeft gehad. hier verbergen we alle inhoud binnen de zodra het de klasse "wf-laden" * / dekking heeft: 0; body font-family: 'Boogaloo', cursief;
Dit kleine goudklompje gaat zich verbergen (door de dekking te verkleinen tot 0) elk element binnen html.wf laden. Het is de eerste regel, die alles verbergt voordat FOUT plaatsvindt.
Met de verborgen inhoud kunnen we een achtergrond van ons html-element toepassen.
.wf-laden / * hier is een achtergrondafbeelding (bij een meer 723bytes) om aan te geven dat er iets aan de hand is * / background: url ('... /images/ajax-loader.gif') no-repeat center center; / * gewoon om zeker te zijn van de element deelt dezelfde dimensies als het browservenster tijdens het laden (en niet de mogelijk langwerpige pagina) * / hoogte: 100%; overloop verborgen; We hebben een loader.gif gebruikt die is gegenereerd door een van de vele beschikbare online tools. Het is duidelijk dat, ongeacht de achtergrond die u kiest, deze licht van gewicht moet zijn. Het heeft geen zin om een lettertypebestand van 20 KB te laden door een afbeelding van 4 MB weer te geven ...
Nu, als we onze pagina laden, is alle inhoud verborgen, afgezien van de html.wf laden met zijn lader gif achtergrond. Wanneer het lettertype wordt geladen, verdwijnt dat gif.
Het html-element is nu aan andere klassen toegewezen, dus laten we die gebruiken om de onzichtbare inhoud terug te brengen:
.wf-active *, .wf-inactive * / * voeg een aantal overgangseffecten toe om de inhoud geleidelijk opnieuw te introduceren zodra de lettertypen zijn geladen * / -webkit-transition: opacity 1s ease-out; -moz-overgang: opacity 1s ease-out; -o-transition: opacity 1s ease-out; overgang: opacity 1s ease-out;
Ongeacht of het lettertype succesvol of onvoldoende is geladen, we moeten onze inhoud opnieuw bekijken. wf-loading laat zijn greep op de nuldekking van alle elementen op de pagina los, dus we zetten ze langzaam weer in. Nogmaals, om dingen te vertragen, probeer dan heel veel lettertypen toe te voegen (of speel met de klassenamen in het elementinspector van je browser.) Lettertypen ook opgeslagen, dus elke keer dat u het test, moet u mogelijk de cache van uw browser legen.
Eenvoudig, maar effectief. Mijn favoriete soort fooi. En de mogelijkheden zijn eindeloos - hoe zou u voorstellen het gebruik van de wf- * klassen?
Last but not least, ik kon niet weerstaan aan deze preloader door Kontramax op dribbble. Het is een beetje zwaar voor onze doeleinden, maar wat is dat?!
