@font-face Webfont Generátor
Változó betűtípusok, WOFF2 és CSS egy kattintásra
Dobd be a TTF, OTF, WOFF vagy WOFF2 fájljaidat — beleértve a változó betűtípusokat — válaszd ki a beállításaidat, és tölts le egy kész hosztolható csomagot WOFF2, WOFF, egy teljes stylesheet.css és egy élő demo oldal társaságában.
Húzza ide a betűtípusokat vagy kattintson a böngészéshez
TTF, OTF, WOFF, WOFF2 és változó betűtípusok — több fájl megengedett
Kiválasztott betűtípusok
Konverziós beállítások
Ez az a név, amit a CSS-ben használni fog, mint font-family: 'MyName';. Hagyja üresen, hogy megtartsa a fájl eredeti betűtípus-család nevét.
Szabályozza, hogyan jelenik meg a szöveg, míg a webfont betöltődik.
Az url(...) belső használatra szolgáló útvonal a generált stylesheet-ben.
Tipp: nyomja meg Ctrl+Enter a generáláshoz.
A webfont csomagja készen áll
A ZIP tartalmazza: konvertált betűtípusok, stylesheet.css és egy élő demo.html.
100% kliensoldali
A konverzió teljes mértékben a böngészőjében zajlik WebAssembly használatával. A betűtípusai sosem kerülnek feltöltésre.
Változó betűtípusok & minden formátum
TTF, OTF, WOFF és WOFF2 bemenet — optimalizált WOFF2 kimenet, teljes változó betűtípus tengely támogatással (wght, wdth, slnt, ital).
Termelésre kész kimenet
Egy stylesheet.css-t szállít a megfelelő font-display, opcionális local() és egy demo.html fájl társaságában, hogy közvetlenül beilleszthesd a csomagot a projektedbe.
Mi az a webfont generátor?
A webfont generátor asztali vagy letöltött betűtípusfájlokat (TTF, OTF, WOFF, WOFF2 — beleértve a modern változó betűtípusokat) alakít át olyan formátumokká, amelyeket a böngészők weben betölthetnek — főként ma WOFF2, a WOFF mint örökölt visszaesés — és előállítja a megfelelő CSS @font-face deklarációkat, így saját magad hosztolhatod a weboldalad tipográfiáját.
Miért hosztolja önállóan a betűtípusokat?
A saját hosztolás teljes ellenőrzést biztosít a teljesítmény, adatvédelem és megbízhatóság felett. Nincs harmadik fél által küldött kérés a Google Fonts-hoz (hasznos a GDPR szempontjából), nincs extra DNS lekérdezés, előtöltheted a fájlt, és pontosan te döntöd el, hogy mely súlyok, stílusok és tengelyek kerülnek a webhelyedhez.
Hogyan működik a konverzió
A WOFF2 a TTF/OTF körvonalakat egy Brotli-tömörített tárolóba csomagolja, amelyet kifejezetten a webhez terveztek — jellemzően 30%-kal kisebb, mint a WOFF és több mint 50%-kal kisebb, mint a nyers TTF. A WOFF egy régebbi zlib-tömörített tároló, amelyet nagyon régi böngészők visszaesésére tartanak meg. Generátorunk a Google hivatalos WOFF2 kódoló és dekódoló programját futtatja, amely WebAssembly-re van lefordítva, így a konverzió helyben történik a böngésződben. Dobd be a WOFF2 fájlt, amelyet a Google Fonts-ról töltöttél le, és mi átláthatóan dekódoljuk vissza egy sfnt tárolóba, mielőtt újra kódolnánk — soha nem kell keresned az eredeti TTF-et.
Mit kap a csomagban
- Betűtípusok WOFF2 (és opcionálisan WOFF/TTF) formátumban minden feltöltött archoz — beleértve a változó betűtípusokat, amelyek egyetlen kis fájlban maradnak.
- Egy teljes stylesheet.css egy @font-face szabállyal fájlonként, a megfelelő format() javaslatokkal, font-weight tartományokkal, font-style, font-stretch, font-display és opcionális local().
- Egy demo.html oldal, hogy előnézhesd minden súlyt, stílust és tengelyt több méretben, mielőtt élesbe állítanád.
- Opcionális Base64 beágyazás, hogy a betűtípust inline szállítsa a CSS-ben offline első vagy egyfájlú forgatókönyvekhez.
Adatvédelem & licencelés
A fájlok sosem hagyják el az eszközét — minden a böngészőjében kerül feldolgozásra. Mindig győződjön meg róla, hogy a betűtípus licencje lehetővé teszi a webfont beágyazását, mielőtt közzétenné a weboldalán.