@font-face je pravidlo CSS, ktoré umožňuje zobrazovať písma na webových stránkach na internete. Pred existenciou tohto pravidla mohli správcovia webových stránok na svojich stránkach používať obmedzený súbor písiem, ktoré sú najbežnejšie a nainštalované v počítačoch používateľov. S príchodom @font-face možno na webové stránky jednoducho pripojiť akékoľvek konkrétne písmo.
Ak ste si stiahli písmo na našej stránke, v archíve s fontami nájdete pripravený kód CSS, ktorý treba skopírovať a umiestniť do dokumentu CSS pripojeného k projektu.
Inštalácia krok za krokom
1. Vyberte požadované písmo a kliknite na tlačidlo "stiahnuť pre webové stránky".
2. V koreňovom adresári vašej stránky vytvorte priečinok fonts (Písma) a skopírujte doň prevzaté písma.
Otvorte dokument CSS a skopírujte doň obsah textového súboru z archívu.
4. Uistite sa, že cesta k priečinku s písmom je napísaná správne. V závislosti od polohy priečinka, v ktorom sa nachádzajú písma, môže cesta obsahovať jednu alebo viac bodiek.
5. Hotovo. Skopírujte vlastnosť s názvom rodiny a vložte ju do selektora, pre ktorý píšete štýly.
Čo ak som si už písmo stiahol inde a chcem ho zapojiť?
V tomto prípade musíte na internete nájsť konvertor písiem a previesť svoje písmo ttf (alebo otf) do správnych formátov, konkrétne eot, svg, woff a woff2. Tým sa zabezpečí správne zobrazenie a fungovanie písma vo všetkých prehliadačoch, ako aj v mobilných zariadeniach.
Potom musíte pravidlo @font-face napísať sami a dodržať jeho syntax.
Syntax pre @font-face
Syntax pravidla možno zhruba rozdeliť na základné vlastnosti a rozšírené vlastnosti.
Základné:
- font-family - určuje názov písma.
- src - označuje cestu písma. Môže to byť adresa URL písma umiestnená na serveri vašej webovej lokality, adresa URL písma umiestnená na serveri niekoho iného (napríklad Google Fonts) alebo jednoducho názov písma umiestnený v počítači používateľa (Helvetica New Bold, Tahoma, Georgia atď.) .
Rozšírené:
- font-display - určuje, ako sa bude písmo zobrazovať v závislosti od toho, či bolo stiahnuté a pripravené na použitie.
- font-stretch - umožňuje nastaviť šírku textu.
- font-style - určuje, či je písmo obyčajné, kurzívne alebo šikmé (posledné dve možnosti nie sú rovnaké).
- font-weight - Nastavuje sýtosť písma na stupnici od 100 do 900 (100-malé, 900-malé).
- font-variant - určuje, ako majú byť prezentované malé písmená - ponechajte ich bez úpravy alebo ich urobte všetky malé (veľké).
- font-feature-settings - umožňuje spravovať pokročilé typografické funkcie v písmach OpenType.
- font-variations-settings - umožňuje nízkoúrovňové ovládanie variantov písiem Open Type a TrueType zadaním štvorpísmenových názvov osí.
- unicode-range - určuje rozsah kódov Unicode (glyfov), ktoré sa majú používať v písme.
Pripojenie písma k vášmu webu pomocou Google Fonts
Použitie písma Google Fonts je najjednoduchší spôsob, ako prepojiť písmo s vašou webovou stránkou. Prejdite na ich webovú lokalitu, nájdite požadované písmo, vyberte správne písmo na inštaláciu a skopírujte kód.
Skopírovaný kód by mal byť umiestnený v tele tagu head na vašej html stránke.
Nevýhodou tejto metódy je, že ak ste počas vytvárania stránky stratili internet - písma sa nezobrazia a nahradia sa štandardnými, pretože súbory sa nenachádzajú v lokálnom počítači, ale na serveroch spoločnosti Google. Taktiež je pravdepodobné, že keď prídete ku klientovi na prezentáciu layoutu (alebo len na konformitu) a on nebude mať Wi-Fi, problém nastane znova.
