A betűk betöltése a rendszerindítóval
De ma minden érv a múlté. Most van egy új gyakorlat - elrejteni minden olyan szöveget, amelyre az egyedi betűtípusokat alkalmazzák a betűtípusok teljes betöltése előtt. Ez a módszer a "rejtett szöveg villogása" vagy az MCT. Ezt a technikát gyakran a legrosszabbnak nevezik. Scott Jehl szerint ez a módszer rossz teljesítményt és használhatóságot is jelent:
"Általában az MST-vel kapcsolatos legtöbb probléma az iOS Safari böngészőben található, amely 30 másodpercig képes elrejteni a szöveget, és végül is szabványos betűtípusként jeleníti meg. Hasonló hatású, de rövidebb késleltetési idő látható a Chrome, a Firefox és az Opera böngészőben. "
A Typekit weboldalon található segítségre a probléma hasonló módon szól: "Az MNT módszer alkalmasabb egy weboldal azonnali használatára, különösen lassú kapcsolatok esetén". És mint tervezők és fejlesztők, egy dolgot kell választanunk, MNT-t vagy MCT-t.
Rejtett szöveg villogása
A betűtípus betöltődik
A modern trendek és megközelítések a webfejlesztésben
Ismerje meg a gyors szakmai növekedés algoritmusát a helyszín építéséből
A szöveg teljesen láthatatlan, amíg betöltődik a betűtípus
Az idő lassan folyik
A betűtípus betöltött
Nem listázott szöveg villogása
A betűtípus betöltődik
A szöveg a betűtípus-családban megadott betűtípuson jelenik meg
A visszahúzást a kívánt webes betűtípus váltja fel
A két módszer közötti különbség egyszerűen óriási. Scott azt is elmondja, hogy az MCT megközelítésével a Filament Group weboldalán megjelenő szöveg 2.7 másodpercen belül megjelenik a 3G kapcsolaton, a MNT pedig 0.6-nál. Ha szembe kell nézni a maximális interfész sebesség biztosításával, akkor az MNT-t kell használni. Ez a módszer a hálózati teljesítményre koncentrál és pozitív felhasználói élményt nyújt.
Problémák az MNT módszerben
Ez a módszer természetesen számos hátránnyal jár. Például, mivel a font-súly és az x-height tulajdonságok erős különbségei vannak, amikor egy szabványos betűkészletről egyéni szövegre váltanak, akkor ugorhat vagy erősen utazhat. Ie ha a vállalat a márkajelzéssel ellátott betűtípushoz kíván használni a kommunikációt, akkor az MNT módszerrel irreális.
Néha ilyen hiányosságok enyhíthetők. Nézd, például Bram Stein oldalán. A szabványos betűkészlet szokásos módosításához nagyon gyors, és a szöveg formázása szinte változatlan. Ha nem találunk hasonló méretű betűtípust, akkor SVG-t kell használnunk.
Tekintsük az MNT módszert
Nemrég kísérletezett a Web Betöltés Betöltővel. Ez a betöltő lehetővé teszi, hogy szabályozza az MNT összes szövegének megjelenítési szakaszát. Először be kell illesztenie a rendszerindító kódot a jelölésbe:
A szkript betöltődik aszinkron módon, azaz. kódot közvetlenül a záró testcímke vagy fej előtt lehet hozzáadni. Más erőforrásokat nem lehet blokkolni. Ez a módszer nem támogatott az IE9-ben, de ha ez nem olyan fontos, akkor helyettesítheti azt:
A szkript összekapcsolása után hozzá kell adnia a betűtípust. Ebben az oldalprojektben betűkkel kísérleteztem a @ font-face segítségével a Typonine webhelyről. amelyek a webhely fejlécében található linken keresztül kerülnek hozzáadásra:
A modern trendek és megközelítések a webfejlesztésben
Ismerje meg a gyors szakmai növekedés algoritmusát a helyszín építéséből
A Preconnect itt nagyon hasznos, automatikusan létrehoz egy hálózati kézfogást; Mielőtt betekintést kérnénk a forgatókönyemből, már rendelkezünk olyan információkkal, amelyek ahhoz szükségesek, hogy a böngésző betöltse a megfelelő erőforrásokat. A letöltési folyamat kissé gyorsabb. (Köszönjük Ilya Grigorik-t, hogy segítsek használni a crossorigin attribútumot). A WebFontConfig objektum használatával elkezdheti ellenőrizni, hogy a betűtípus betöltődött-e vagy sem:
Az egyéni objektum megmondja a webes betűtípus-betöltőnek, hogy a betűtípusokat külső stílusokból szeretnénk betölteni. Ebben a rendszerindítóban, ha szükséges, a Typekit, a Google, a Fontdeck és a Fonts.com betűtípusokat használhatja. A családok tömbje meghatározza a CSS betűtípus-családban használt összes betűtípust.
Lehet, hogy észrevette, hogy az időtúllépési késleltetést 2 másodpercre állítom. Ez csak egy számot találtam fel. Szerintem két másodperc kell elég ahhoz, hogy a hálózatra irányuló kérelmet - még lassú kapcsolatok esetén is, amikor a felhasználóknak legalább egy bizonyos tartalomra van szükségük. A betűtípus fájlok betöltése után a html tag hozzárendel egy osztályhoz:
Ezek az osztályok hasznosak lehetnek számunkra, hogy stílusokat állítsunk be attól függően, hogy a betűtípus betöltött-e vagy sem. További osztályok segíthetnek nekünk:
betöltés: hozzáadva, ha minden betűtípust kértek.
aktív: hozzáadódik a betűtípusok megjelenítéséhez az oldalon.
Inaktív: hozzáadva, ha a böngésző nem támogatja a megadott betűtípusokat vagy betűtípusokat nem lehet betölteni.
Betöltés: hozzáadva minden betöltett betűtípushoz.
fontactive: hozzáadva minden megjelenített betűtípushoz.
Betűtípus: hozzáadva, ha a betűtípus nem tölthető be.
Most a stílusokban állíthatja be a kívánt betűtípuscsaládot a .wf-active osztályban:
Először is, a felhasználók látni fognak egy betűtípust az $ fallback változóból, de amint a .wf-aktív osztályunkat hozzáadjuk a Web betűtípus betöltőhöz, a betűtípusok a miénkre változnak. Most a progresszív javítás technikáját kell használni.
Ismerje meg a problémákat
Az egyik probléma, amit észrevettem, ez volt. A betűk betöltése és alkalmazása után a szavak száma megváltozott, és az egyes elemek nagyon szélesek lettek, vagy fordítva nagyon keskenyek. A probléma megoldásához különböző betűméretet és vonalmagasságot állíthat be a szabványos és egyéni betűkészletekhez:
A nem listázott szöveg villogásának hatásának minimalizálása
Ne felejtsd el megnézni az elérhető események teljes listáját. Ennek az eseménynek a segítségével gyorsan ellenőrizhetjük a webhely fejlécét, és ez a kulcs létezik-e a sessionStorage-ban. Ha igen, akkor a html tag azonnal hozzárendelődik a megfelelő osztályhoz:
Ez a módszer nem képes teljesen eltávolítani a villogó szöveget. A probléma sokáig releváns lesz. Ez a megközelítés azonban jelentősen javítja az MCT-t.
A jó tipográfia számára a betűkészletek letöltése rendkívül fontos
Kiadás: A webformyself parancs.
A modern trendek és megközelítések a webfejlesztésben
Ismerje meg a gyors szakmai növekedés algoritmusát a helyszín építéséből
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
