Navrhovanie textov je nevyhnutnou súčasťou každej webovej aplikácie. Výber správneho písma ovplyvňuje nielen čitateľnosť, ale aj celý vzhľad vašich webových stránok. Rodiny písiem hrajú kľúčovú úlohu, pretože zabezpečujú, že vaše webové stránky sú konzistentne zobrazené na rôznych zariadeniach a systémoch. V tomto návode vám ukážem, ako definovať efektívne rodiny písiem a efektívne kombinovať rôzne písma.
Najdôležitejšie poznatky
Existuje nespočetné množstvo písiem, ale definovanie rodín písiem je dôležité na dosiahnutie konzistentných výsledkov na rôznych zariadeniach. Naučíte sa, ako používať vlastnosť CSS font-family, špecifikovať viacero písiem a definovať alternatívy, aby ste zabezpečili, že vaše texty budú vždy atraktívne.
Príručka krok za krokom
Najprv je dôležité pochopiť základy rodín písiem. Písma môžu byť rozdelené do dvoch hlavných kategórií: serifové písma a sans-serif písma. Serifové písma majú malé ozdoby na koncoch písmen, zatiaľ čo sans-serif písma tieto nemajú.
Aby ste definovali rodinu písiem v CSS, používate vlastnosť font-family. Začnite tým, že nastavíte písmo pre nadpis. Bežne odporúčaným písmom pre nadpisy je serifové písmo. V našom príklade vyberieme písmo Droid Serif.
Pri tom môžete uviesť viacero písiem. Najprv sa použije písmo, ktoré sa objaví na prvom mieste v zozname. Ak to nie je k dispozícii, použije sa ďalšie písmo, až kým sa nenájde dostupné písmo.
Pre bežné texty často odporúčam sans-serif písmo ako Droid Sans. Tieto písma sú často jasnejšie a ľahšie čitateľné.
Dôležité je, aby ste pri písmach, ktoré obsahujú viacero slov, zabalili tieto slová do úvodzoviek. To je potrebné na zabránenie nedorozumeniam pri písme.
Akonáhle ste definovali písma, môžete si pozrieť výsledok vo vašom prehliadači. Zvyčajne máte možnosť skontrolovať použité písma, aby ste videli, či všetko fungovalo správne.
Ako zistíte, že požadované písmo sa nedalo načítať, môžete sa obrátiť na Google Fonts. Google Fonts vám ponúka široký výber písiem, ktoré môžete jednoducho integrovať do vašich webových stránok. Môžete potrebné písmo stiahnuť priamo z webovej stránky Google Fonts a vložiť ho ako CSS odkaz vo vašom HTML dokumente.
Tu je jednoduchý príklad, ako to môžete urobiť. Prejdite na webovú stránku Google Fonts, vyberte si písmo a kliknite na tlačidlo odkazu, aby ste získali kód na vloženie.
Teraz môžete priamo používať vaše písma z Google. Týmto máte prístup k mnohým krásnym písmam, ktoré nie sú nutne nainštalované na zariadení používateľa.
To pekné na tomto prístupe je, že Google Fonts môže tiež ukladať písma do vyrovnávacej pamäte, takže sa pri opakovaných návštevách webovej stránky nahrávajú rýchlejšie. Využite to na zlepšenie používateľského zážitku.
Ďalším aspektom, ktorý je dôležitý pri rodinách písiem, sú alternatívy. Môžete uviesť viacero alternatív, ktoré by mal prehliadač použiť, ak preferované písmo nie je dostupné. To chráni vaše webové stránky pred problémami so zobrazením.
Zabezpečte, aby ste si dobre vybrali alternatívne písma, aby ste zabezpečili konzistentný alebo podobný vzhľad. Môžete napríklad použiť voliteľné písma ako Georgia alebo Times New Roman ako alternatívy pre serifové písmo.
Ako pri každom návrhu je rozumné experimentovať. Vyskúšajte rôzne kombinácie, aby ste zistili, ktoré písma najlepšie spolupracujú a vytvárajú požadovaný vizuálny dojem.
Zhrnutie – Základy rodín písiem v HTML, CSS a JavaScript
Definovanie rodín písiem je rozhodujúci krok pri navrhovaní vašich webových stránok. Používaním CSS font-family a integráciou písiem cez Google Fonts môžete zabezpečiť, že vaše texty budú atraktívne a čitateľné na rôznych zariadeniach. Vyskúšajte rôzne písma a alternatívy, aby ste našli najlepšiu kombináciu pre vašu aplikáciu.
Často kladené otázky
Ako definujem rodinu písiem v CSS?Použite vlastnosť font-family, za ktorou nasleduje požadované písmo a voliteľné alternatívne písma.
Môžem použiť písma z Google Fonts?Áno, môžete integrovať písma z Google Fonts použitím poskytnutého odkazu v hlavičke vašej HTML súboru.
Čo sú alternatívne písma?Alternatívne písma sú náhradné písma, ktoré môže prehliadač použiť, ak preferované písmo nie je dostupné.
Prečo sú úvodzovky okolo písiem nevyhnutné?Úvodzovky sú potrebné, ak písmo obsahuje viacero slov, aby sa predišlo nedorozumeniam.
Ako nastavím písma pre plynulý text?Pre plynulý text sú sans-serif písma ako Arial alebo Helvetica často jasnejšie a čitateľnejšie.
