Az egyedi betűkészletek használata a weboldalakon
A szöveges tartalmak mindig is fontos weboldalak voltak, de a web kezdetén a tervezők és a fejlesztők súlyosan korlátozottak voltak a tipográfiai ellenőrzéseikben, amelyek a weboldalukon voltak. Ez magában foglalta a betűkészletek korlátozását, amelyeket megbízhatóan használhattak a webhelyükön. Valószínűleg hallottad a múltban említett "webes biztonságos betűtípusokat". Ez olyan kis betűkészletre utal, amelyek nagy valószínűséggel bekerültek egy személy számítógépére, vagyis ha a webhely az egyik ilyen betűtípust használta, akkor biztos volt, hogy az adott személy böngészőjében helyesen jelenne meg.
Ma a webes szakemberek számos új betűtípust és típustípust dolgoznak ki, amelyek közül az egyik a WOFF formátum.
Mi a WOFF?
A WOFF olyan betűszó, amely a "Web Open Font Format" kifejezést jelenti. A betűkészleteket a CSS @ font-face tulajdonsággal együtt használják. Ez a mód arra, hogy beágyazza a betűtípusokat a weboldalakon, így speciális betűtípusokat használhat a tipikus "Arial, Times New Roman, Grúzia" felett, amelyek a fent említett webes biztonságos betűkészletek.
A WOFF-ot a W3C-nek adták át a weboldalakon található betűkészletek csomagolásának szabványaként. 2010. november 16-án munkaterv lett. Ma WOFF 2.0-vel rendelkezünk, amely közel 30% -kal javítja a tömörítést a formátum első változatából. Bizonyos esetekben ezek a megtakarítások még lényegesebbek lehetnek!
Miért használja a WOFF-ot?
A webes betűkészletek, köztük a WOFF formátumban megjelenő betűkészletek számos előnnyel járnak, mint más betűtípusok. Amennyire hasznosak voltak azok a webes biztonságos betűkészletek, és természetesen a betűkészletek helyszíne van a munkánkban, kedves a választási lehetőségeink bővítése és a tipográfiai lehetőségek megnyitása.
A WOFF betűkészletek a következő előnyökkel járnak:
- Hozzáférhetőbbek, mint a betűkészletek, mint képek. A WOFF stílusa egyszerű CSS formátumú HTML-szöveget ad, így hozzáférést és tervellenőrzést biztosít a képek számára.
- A WOFF fájlok tipográfiai információkat tartalmaznak, mint például a kontextusos formák és a régi stílusjegyek. Ez jobb tipográfiát biztosít a weboldalaknak, mivel a helyes karaktereket használja, nem csak a közelítéseket.
- A WOFF betűtípusok segíthetik a nemzetköziesedést, mivel betűkészleteket ágyazhat be más nyelvű karakterekkel.
- Mint minden CSS-stílusú szöveg, a WOFF-el kialakított betűtípusok több keresőmotorra is alkalmasak. A keresőmotorok nem látják a képen beágyazott szöveget, és bár az ALT szöveg segíthet, maga a szöveg sem helyettesíthető.
- A WOFF betűkészletek tömörítve vannak, így kisebbek, mint más típusú betűtípusok. Ez segít a webhely letöltési sebességében és az általános teljesítményben.
- A WOFF fájlokat a WOFF fájlok beágyazásával lehet megőrizni a márkaazonosság megőrzésével.
WOFF böngésző támogatása
A WOFF kitűnő böngésző támogatással rendelkezik a modern böngészőkben, többek között:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Alapvetően ma is támogatott a fórumon, az egyedüli kivétel az Opera Mini összes verziója.
A WOFF betűtípusok használata
A WOFF fájl használatához fel kell töltenie egy WOFF fájlt a webszerverre, meg kell adnia egy nevet a @ font-face tulajdonsággal, majd hívnia kell a betűtípust a CSS-ben. Például:
- Töltsd fel a myWoffFont.woff nevű betűt a webkiszolgáló / fonts könyvtárába.
- A CSS-fájlban adjon hozzá egy @ font-face szekciót:
@ font-face {
betűtípus-család: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') formátum ('woff');
}
- Adja hozzá az új betűtípusnevet (myWoffFont) a CSS betűkészletéhez, mint bármely más betűnév:
p {
betűtípus-család: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Hol kaphatok WOFF betűtípust?
Két nagyszerű hely található számos WOFF betűtípussal, amelyek ingyenesek a kereskedelmi és nem kereskedelmi használatra:
- Nyílt betűtípus-könyvtár
- Fontos mókus
Ha WOFF formátumban nem elérhető betűtípussal rendelkezik licenccel, használhatja a WOFF készítőt, mint például a Betűtípusnál, hogy a fontfájlokat WOFF fájlokká alakítsa. Van egy olyan parancssori eszköz, az sfnt2woff, amelyet Macintoshon és Windows-on használhat a TrueType / OpenType betűtípusok WOFF-be konvertálásához.
Töltsd le a rendszerednek megfelelő binort, és futtasd a parancssorba (vagy Terminálhoz), és kövessd az utasításokat.
WOFF példa
Íme néhány példa a WOFF fájlokról: WOFF oldal a HTML5-ben 24 óra alatt.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 17/07/17