A betűtípusok használata a legtöbb weboldalon elterjedt, és gyakran tartalmaz hibákat. E hibák közül sok negatívan befolyásolja az internetes teljesítmény költségvetését. Ennek a cikknek az a célja, hogy információkat nyújtson a webes betűkészlet-használatról, és segítsen javítani a webes teljesítményt.
Amint azt a weboldalak megjelenítésekor alkalmazott hierarchia mutatja, a betűtípus-elemek késleltethetik más elemek megjelenítését, amíg be nem töltődnek. Ennek a késleltetésnek a megfelelő kezelése fontos mind a kumulatív elrendezéseltolás (CLS), mind a felhasználói észlelés szempontjából.
Probléma a betűtípus betöltésével
Amíg az oldal betűtípusai be nem töltődnek, a betűtípusok láthatósága a HTML- és CSS-megjelenítési folyamat során böngészőnként változik. Íme egy összefoglaló arról, hogy a különböző böngészők hogyan kezelik ezt a helyzetet:
| böngésző | Alapértelmezett viselkedés, ha a betűtípus nincs készen… |
|---|---|
| él | Rendszerbetűtípust használ, amíg a betűtípus készen nem áll. Kicseréli a betűtípust. |
| króm | Legfeljebb 3 másodpercig elrejti a szöveget. Ha a szöveg még mindig nem áll készen, használjon rendszerbetűtípust, amíg a betűtípus készen nem áll. Kicseréli a betűtípust. |
| Firefox | Legfeljebb 3 másodpercig elrejti a szöveget. Ha a szöveg még mindig nem áll készen, használjon rendszerbetűtípust, amíg a betűtípus készen nem áll. Kicseréli a betűtípust. |
| Safari | Elrejti a szöveget, amíg a betűtípus készen nem áll. |
A probléma megoldása támaszkodás nélkül a böngésző viselkedéséről, bevezették a font-display paramétert. Jelenleg a böngészők 92%-a támogatja a font-display paramétert.
Mit csinál a Font-Display?
Az oldalbetöltési folyamat során a betűtípusok megjelenése a böngészőtől függően változhat a teljes betöltésig. Például a Safari böngésző egyes verziói elrejtik a szöveget, amíg a betűtípus be nem töltődik. A font-megjelenítés: csere A CSS-paraméter szabványosítja ezt a viselkedést azáltal, hogy a szöveget rendszer-betűtípus használatával jeleníti meg, amíg a betűtípusfájlok be nem töltődnek. A betűtípusok betöltése után a rendszer betűtípusát lecseréli a kívánt betűtípusra. Íme egy példa a felhasználásra:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Betűtípusok előtöltése
Használata A betűtípusok betöltése a kritikus megjelenítési útvonal előtt megakadályozhatja a betűkészletek betöltése közbeni hiányosságokat.
BÓNUSZ: Ipari megközelítés a betűtípus használatához
A LikeTech adatai szerint vessünk egy pillantást az internetes világ egy fontos trendjére és pillanatképére. Az alábbi első grafikon a betűkészlet-használatot mutatja a felső 10,000 100,000 oldalon, a második grafikon pedig a XNUMX XNUMX legnépszerűbb webhely betűtípus-használatát mutatja. Vizsgáljuk meg először ezeket a grafikonokat:
5%-os különbség van a Google Font és Font Awesome használatában a 10,000 100,000 legnépszerűbb webhely és a XNUMX XNUMX legnépszerűbb webhely között. Ez azt mutatja, hogy a legjobb 10,000 XNUMX webhely optimalizálta a betűtípus-használatát. Figyelemre méltó témaként javasoljuk ennek a vizsgálatát. Fontolja meg, hogyan valósíthat meg webes betűtípusokat saját megoldásaival.
2. BÓNUSZ: A Google Font és Font Awesome használati statisztikái
Az első bónuszra hivatkozva azt javasoljuk, hogy vizsgáljuk meg a két grafikont, amelyek a leggyakrabban használt fontkönyvtárak számszerű kiterjedését mutatják. Az itt található egyedi domainek száma meghaladja a milliókat, és ezek a milliók az Ön SEO versenytársait jelentik. Ezeknek a könyvtáraknak a másoknál jobb és optimálisabb használata segíthet kiemelkedni.
Ha követi ezeket a tippeket és optimalizálja a betűtípus-használatot, jelentősen javíthatja webes teljesítményét és felhasználói élményét.
