Digitális kiadványok
CSS
CSS technikák
Bootstrap
Font Squirrel
Mi az a Font Squirrel?
A Font Squirrel (vagy Betű Mókus) egy webfont szolgáltatás, ingyenes, és fizetős webfontok mellett kínálnak egy webfont generátort. A generátorral hagyományos betűtípusokból készíthetünk a böngészők által is támogatott webfontokat, a generátor fontok bekötéséhez szükséges CSS-t is elkészíti.
A webfont generátor a
Generator menüpont alatt érhető el:
https://www.fontsquirrel.com/tools/webfont-generatorA webfontokról bővebben:
Font Squirrel használata
A webfont előállításához szükség van egy font állományra, amit az
Upload Fonts gombbal lehet feltölteni. Párhuzamosan több fontot is fel lehet tölteni.A generáláshoz el kell fogadni a jogi nyilatkozatot, hogy van jogunk az adott fontot felhasználni.
A feltöltött fontokat kilistázza a generátor, amiket az
x -re kattintva lehet eltávolítani, ha mégsemakarjuk webfontá alakítani őket.
Az
Expert beállításokat kiválasztva számos beállítás közül kiválaszthatjuk például a generálandó webfont formátumokat. A webfont formátumokról bővebben: @font-face.
Amennyiben csak modern böngészőket akarunk támogatni, elég a WOFF, és a WOFF2 formátumot választani (ez az alapbeállítás). A TrueType, EOT és SVG formátumokat csak régebbi, mára már elavult böngésző verziók támogatása esetén kell kiválasztani.
Magyar ékezetes betűtípus generálásához a fontnak támogatnia kell a megfelelő ékezeteket, és az
Expert beállításokban ki kell választanunk a nyelvi támogatást (Subsetting > Custom Subsetting > Language):
A generált állományokat a
Download your kit gombra kattintva lehet letölteni.
A letöltés egy tömörített zip állomány, ami tartalmazza a legenerált webfont állományokat, egy CSS állományt a generált
@font-face stílussal, és egy demó HTML állományt, amiben megtekinthetjük a fontot egy próbaszövegen (a használatba vételhez tömörítsük ki).
A demó állomány böngészőben megnyitva:
A legenerált CSS állomány tartalma (ami a fontok bekötéséhez szükséges
@font-face):1
@font-face {
2
font-family: 'plaingermanicaregular';
3
src: url('plain_germanica-webfont.woff2') format('woff2'),
4
url('plain_germanica-webfont.woff') format('woff');
5
font-weight: normal;
6
font-style: normal;
7
8
}
Copied!
Last modified 2yr ago
Export as PDF
Copy link