Tekstide kujundamine on iga veebirakenduse hädavajalik osa. Õige fondi valik mõjutab mitte ainult loetavust, vaid ka kogu sinu veebisaidi välimust. Fondigruppidel on selles olulised roll, kuna need tagavad, et sinu veebisait kuvatakse erinevates seadmetes ja süsteemides järjepidevalt. Selles juhendis näitan ma, kuidas sa efektiivselt fondigruppe määratled ja erinevaid fonte tõhusalt kombineerida saad.
Olulised järeldused
Fontide valik on lõputu, kuid fondigruppide määratlemine on oluline, et saavutada erinevatel seadmetel järjepidevad tulemused. Sa õpid, kuidas kasutada CSS omadust font-family, määrata mitu fonti ja defineerida varuvalikud, et tagada, et sinu tekstid näevad alati atraktiivsed välja.
Samm-sammult juhend
Esiteks on oluline mõista fondigruppide aluseid. Fondid saab jagada kaheks peamiseks kategooriaks: serifi fondid ja sans-serif fondid. Serifi fondid sisaldavad tähti, millel on väikesed kaunistused täheotstes, samas kui sans-serif fondidel neid ei ole.
Fondigruppi CSS-is määramiseks kasutad omadust font-family. Alusta pealkirja fondi määramisest. Üks sageli soovitatud fond on serifi fond. Meie näite puhul valime fondi Droid Serif.
Selles määrad mitu fonti. Esmalt kasutatakse fondi, mis on nimekirjas esimene. Kui see ei ole saadaval, kasutatakse järgmise fondi, kuni leitakse saadaval fond.
Jooksvateks tekstideks soovitan sageli sans-serif fondi nagu Droid Sans. Need fondid on sageli selgemad ja lihtsamad lugeda.
Oluline on, et kui fondid sisaldavad mitut sõna, paned need jutumärkidesse. See on vajalik, et vältida arusaamatusi fondide määratlemisel.
Pärast fondide määratlemist saad tulemust oma brauseris vaadata. Tavaliselt on sul võimalus kontrollida kasutatud fonte, et näha, kas kõik töötab õigesti.
Kui avastad, et soovitud fonti ei saanud laadida, võid kasutada Google Fonts'i. Google Fonts pakub sulle suurt valikut fonte, mida saad lihtsalt oma veebisaidile integreerida. Sa saad vajaliku fondi otse Google Fonts'i veebilehelt alla laadida ja lisada selle CSS-i lingina oma HTML dokumendile.
Siin on lihtne näide, kuidas sa seda teha saad. Mine Google Fonts'i veebisaidile, vali üks font ja kliki linginupule, et saada sisse embedding-code.
Sul on nüüd võimalik kasutada oma fonte otse Google'ist. See annab sulle juurdepääsu suurele hulgale ilusatele fondidele, mis ei pruugi kasutaja seadmes olla paigaldatud.
Oma lähenemise positiivne külg on see, et Google Fonts võib ka fonte vahemällu salvestada, nii et need laaditakse kiiremini, kui külastatakse veebisaiti korduvalt. Kasuta seda kasutajakogemuse parandamiseks.
Veel üks aspekt, mis fondigruppide puhul oluline on, on varuvalikud. Sul on võimalus määrata mitu alternatiivi, mida brauser peaks kasutama, kui eelistatud font ei ole saadaval. See kaitseb sinu veebisaiti kuvamisprobleemide eest.
Veendu, et valid oma varufondid hästi, et tagada järjepidev või sarnane välimus. Näiteks võiksid serifi fondi puhul varufondidena kasutada fondi Georgia või Times New Roman.
Nagu igas disainis, on mõttekas katsetada. Proovi erinevaid kombinatsioone, et näha, millised fondid töötavad kõige paremini koos ja jätavad soovitud visuaalse mulje.
Kokkuvõte – Fondigruppide alused HTML-is, CSS-is ja JavaScriptis
Fondigruppide määratlemine on oluline samm sinu veebisaidi kujundamisel. Kasutades CSS-is font-family ja integreerides fonte Google Fonts'i kaudu, saad tagada, et sinu tekstid kuvatakse erinevates seadmetes atraktiivselt ja loetavalt. Proovi erinevaid fonte ja varuvalikuid, et leida oma rakendusele parim kombinatsioon.
Küsimused ja vastused
Kuidas määratleda fondigrupp CSS-is?Kasutage omadust font-family, millele järgneb soovitud font ja volitavad varufondid.
Kas ma saan kasutada fonte Google Fonts'ist?Jah, saad integreerida fonte Google Fonts'ist, kasutades antud linki oma HTML-faili -osas.
Mis on varufondid?Varufondid on alternatiivsed fondid, mida brauser võib kasutada, kui eelistatud font ei ole saadaval.
Miks on fontidel jutumärkidesse panemine vajalik?Jutumärgid on vajalikud, kui fond sisaldab mitut sõna, et vältida arusaamatusi.
Kuidas pean kohandama fonte jooksvateks tekstideks?Jooksvate tekstideks on sans-serif fondid, nagu Arial või Helvetica, sageli selgemad ja loetavamad.
