A Web betűtípusok, vagy hogyan nem alkalmazzák a jogállamiság @ font-face
A probléma a jogállamiság @ font-face
Egyszerű és egyértelmű, de sajnos a standard feldolgozási szabályok @ font-face a böngészőkben a problematikus. Ha összekapcsolja egy külső webes betűtípusokat a @ font-face, a legtöbb böngésző teszi a szöveget, amelyre alkalmazza a betűtípus, teljesen láthatatlan a betöltési időt a külső font. [Lásd. Ábra. 1]. Egyes böngészők megvárja a betűtípusok egy előre beállított ideig (általában három másodperc), mielőtt megjelenik a szöveget az alternatív font tulajdonságban megadott font-family. De a böngészők „motor» WebKit (Safari, a szabványos böngésző Android, Blackberry), csakúgy, mint egy odaadó kis kutya örökké várni (jó, általában 30 másodpercig vagy tovább) töltse le a kívánt betűtípust. Ez azt jelenti, hogy az egyéni betűtípusok jelentenek potenciális „egypontos hiba” megfizethető honlapján.
Ábra. 1: weblap screenshot betöltve iOS Safari, ahol a szöveg láthatatlan betöltése közben egyéni betűtípusokat.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
Például, ábrán. A 2. ábrán egy időben sor a webpagetest.org oldalon. ami azt mutatja, hogyan fog kinézni filamentgroup.com helyszínen stabil 3G kapcsolat, ha az alapértelmezett viselkedés, ha a betűtípusok letöltése. Megjegyezzük, hogy a szöveget, amelyre a szabály vonatkozik @ font-face, kezd megjelenni csak egy teljes második után a kezdeti megjelenítés:
Ábra. 2: Ideiglenes Végtelen Csoport honlapján loading vonal (a szabványos letölthető betűtípusok). Amikor a 3G kapcsolat betűtípusok letöltése késik egy teljes második.
A felhasználóknak meg kell kész oldal, a lehető leghamarabb - ideális esetben egy másodpercen belül - azaz, meg kell, hogy a szöveg kezdtek megjelenni a lehető legközelebb erre mutató. Számos megközelítés, hogy lehet használni ebben az esetben, de a legalapvetőbb dolog, amit tehetünk -, hogy hagyjon fel a szokásos módon letölthető betűtípusok, amit korábban említettem.
Itt vannak a kritériumok, amelyeket követni kell értékelésekor megközelítés betölteni betűtípus:
CSS kérelmet tartalmazó szabály (ok) font-face, ne takarja el a oldalleképezés. Ahelyett, hogy csatlakoztatja a betűtípus keresztül az elemLekérdezések betűtípus úgy kell konfigurálni, hogy amikor betöltött jelenik alternatív szöveg, hogy elkerülhető lenne a szcintillációs / vakító betöltésekor szövege (a Flash láthatatlan szöveg vagy Foit).
Hogyan lehet letölteni a fontok Végtelen Group
1. lépés: Készítse el a betűtípusok
Egyéni betűtípusok nagyon nehéz lehet, ezért van szükség először, hogy minél kevesebb a betűtípus letöltés. Ne feledje, hogy egyes változatok a telítettség (rendszeres, könnyű, vastag) és stílusát (normál dőlt, félkövér dőlt) font egy külön fájlban, amely gyorsan növeli a teljes összeg a letölthető betűtípusok. Próbálja tartani az összes egyéni betűtípusok nem haladhatja meg az 5 darab, de általában, ha lehetséges, próbálja használni 2-3 font.
Ahhoz, hogy tovább javítsa a szállítás betűtípusok, használja a technikát „hasító” font, amely lehetővé teszi, hogy távolítsa el a szöveget betűk és szimbólumok, hogy nem kell. A FontSquirrel szolgáltatás elég könnyen megoldható.
2. lépés: Készítsünk egy stíluslap font
kódolását adatokat: URI
Tegyük fel, hogy használja az Open Sans betűtípus két változatban telítettség: 400 és 700 (vastag). Hogy támogassa a legtöbb böngészővel kell három különböző formátumokban az egyes opciók: WOFF2, WOFF és TrueType (TTF):
HTML5 és CSS3 gyakorlatban nulla az eredmény!
Ha nincs, például egy ilyen formátumú, akkor hozza létre a betűtípus generátor betűtípus mókus.
Akkor fog minden ilyen fájlokat nyomtatni, és kódolni őket a későbbi behelyezését egy stíluslap adatok felhasználásával: URI. Ha még nem ismeri, hogyan kell csinálni, sok lehetőség van: SASS (Compass), PHP, az online generátorok vagy OpenSSL a parancssorban (OpenSSL base64 -in filename.woff).
Másolás az eredményeket három külön stíluslapot egy CSS fájlban minden formátum: WOFF2 (data-woff2.css) WOFF (data-woff.css) és TTF (data-ttf.css Android). Itt például, nézhet data-woff.css:
Belül, az összes többi fájlt betűtípus rekord src: url (...) formátumban (...) meg kell felelnie egy bizonyos formátumban. Például a data-woff2.css fájlt kap url ( «adatok: application / font-woff2; charset = utf-8; base64, ...») formátumban ( «woff2" ); és az adat-ttf.css - url ( «adatok: application / x-font-font; charset = utf-8; base64, ...») formátumban ( «TrueType»);
3. lépés: Állítsa be a boot stylesheet
Miután egy font fájl készült, meg kell töltse aszinkron a vakítás elkerülése / villódzó szöveget. Mi ezt a mi közüzemi loadCSS. Például, itt van, hogyan tudjuk használni loadCSS letölthető betűtípusok WOFF2 méret:
Persze, meg kell töltse le a megfelelő stíluslap font minden böngésző, látogasson el honlapunkra. Hogyan határozzuk meg, hogy melyik formátumot használja? Alapértelmezésben használunk WOFF méret köszönhetően széles böngésző támogatja. Ha a böngésző vizsgált támogatására WOFF2 méret, használjuk WOFF2 méret, mert a mérete jellemzően 30% -kal kevesebb. Ha nem vagyunk elég magabiztos, hogy meghatározza, hogy a jelenlegi böngésző az alapértelmezett böngésző az Android «motor» Webkit (nem Chrome), akkor átvált a TTF formátumban támogatja az Android 4.x Ne feledje, hogy ha egy hibás formátumú van betöltve, a böngésző egyszerűen használható alternatívát helyi betűtípusokat.
A böngésző nem fogja a szöveg láthatatlan, mert a CSS fájlban adatokat: URI aszinkron betöltésekor. Ez azt jelenti, hogy lehet olvasni a szöveget alternatív amíg van egy loading web betűtípusok (akkor is, ha a kérelem „lógott”, és nem kapott választ).
Ábra. 3: siker! Itt van egy idővonal letölthető honlapunkon a mi módszer letölteni egyéni betűtípusokat. Ha ön használ egy 3G kapcsolat, a betűtípus már megjelenik a kezdeti megjelenítés.
Az általunk használt „cookie”, hogy még jobban
Ezen a ponton már összpontosított előkészítése és átgondolt letöltésével egyéni betűtípus. Így tudjuk megjeleníteni egy másik betűtípust, miközben várjuk a letöltés a mi egyéni betűtípus. Amikor a kívánt betűtípust valóban betöltve, a böngésző helyett a szabványos betűtípusok szokás. Ennek hatására pereotrisovku és általában kis változások az elrendezés, mint Betűtípusok kissé eltérő méretben. Hisszük, hogy amikor először keresi fel az oldalakon ezen „áldozat” indokolt, hiszen időnként a felhasználók gyorsabban kész oldalt, de ez a helyzet bosszantani felhasználók navigálást az oldalon.
A probléma megoldására, az általunk használt cookie-kat annak meghatározására, hogy a betöltött egyedi betűtípusokat, és függetlenül attól, hogy a böngésző cache. Ha igen, akkor mi azonnal mutatja az egyéni betűtípusokat elkerülése eltolódik a jelölést.
A fenti kód egy speciális Apache szerver modul. de használható valami hasonlót minden szerveren nyelvet.
Ha szeretne többet megtudni ezt a megközelítést, cookie-k használatával, mi is készen van a forráskód GitHubról.
Összegezve
A Web betűtípusok valóban lehet egy nagyszerű módja, hogy javítsa a minőségét a web design, de a font letölteni a szokásos módon lehet nagyon káros a teljesítmény a fogyasztó által érzékelt az oldalon. A fenti módszer megbirkózik a probléma a láthatatlan szöveget, általában társított szabály @ font-face, és sokkal gyorsabb teszi a lapok elérhető a felhasználók számára. Reméljük, hogy Ön (és a felhasználók), hogy hasznos lenne!
Felülvizsgálat: Team webformyself.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
A legtöbb IT hírek és webfejlesztés A csatorna-távirat