See artikkel tutvustab teile lihtsat, kuid olulist teemat, mis on Fontid ning annab teile ka sellel teemal praktilise tutvustuse. Järgmisi näpunäiteid käsitletakse selles artiklis,
- Fondid CSS-is
- Atribuudid CSS-i fondis
- font-style atribuut
- font-weight atribuut
- font-size atribuut
- font-family atribuut
Veebisaitidel on sisu piltide, heli, video ja tekstisisu kujul. Kuid enamik veebilehtedele tugineb endiselt valdavalt tekstile. Seda seetõttu, et lihttekst pakub väga olulisi eeliseid.
Mitte pealetükkiv loetavus - soovite kontoris olles kontrollida viimast mängu skoori. Ilmselgelt soovite kiiret tekstivärskendust, mitte lärmakat videot!
Madal võrgu ribalaiuse nõue - tekstisisaldust saab laadida ka kehvade Interneti-ühendustega piirkondades, rikasmeedium aga mitte.
Otsingusõbralik - veebisaidid jälgivad alati, kui hõlpsalt nende sisu otsingumootorites märgatakse. Tekst sobib selleks kõige paremini vähemalt seni, kuni tehisintellekt Interneti täielikult üle võtab!
müügijõu arendaja õpetus algajatele
Teksti sisu vormindamise ajal on veebidisaineritel töötamiseks vaid vähesed parameetrid - font, joondus, esiletõstmine ja värv. Tekstile sobiva fondi valimine on kriitiline valik. Tavapraktika on kasutada CSS-fondifilte HTML-lehekülgedel teksti fontide määratlemiseks.
Kui olete HTML-i programmeerimismaailmas uus, hankige siit algtutvustus. Enne CSS-fontide õppimisega alustamist võiksite lugeda CSS-i põhitõdesid.
Põhjaliku CSS-õpetuse saamiseks külastage Edureka CSS-i õpetust algajatele. Saate suurepärase heads-upi selle kohta, kuidas CSS-i kasutatakse HTML-veebidisaini täiustamiseks.
Selle artikliga edasi liikumine CSS-i fontide kohta
Fondid CSS-is
Font on põhimõtteliselt teksti kuvamisega seotud omaduste kogum. Fonte eristatakse üksteisest nende suuruse, taande, laiuse, viltuse jms järgi. Alustame põhifunktsioonide kuvamisest erinevates fontides.
Näide 1: pealkirjad ja lõik erinevates fontides
body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}Lõik kursiivis rasvases Georgia kirjas
Näide 1: väljund
Näites 1 on meil 3 erinevat teksti rida erinevates fontides. Märkaksite, et iga fondi tähemärgilaius, taane jne erinevad.
Selle artikliga edasi liikumine CSS-i fontide kohta
Atribuudid CSS-i fondis
CSS-fondidel on neli peamist atribuuti - stiil, kaal, suurus ja perekond. Stiili atribuut tähistab normaalset või kaldkirja. Kaal näitab fondi tavalise või paksuna. Kaalu saab väljendada ka arvuliselt. Suurus on lihtsalt fondi suurus suurem, seda suurem on teksti välimus. Fondi suuruse määramiseks on mitu võimalust, üksikasjalikud kirjeldused on toodud hilisemates jaotistes. Perekonna atribuut on määrata tekstile fondi nimi.
Näites 1 oleme pealkirjade ja lõigu jaoks kasutanud erinevaid fondinimesid. Siltide h1 ja p all näeme kahte fontinime, h2 sildid aga ainult ühte fonti. See on fondiperekonna määratlus, sellest täpsemalt hiljem.
Selle artikliga edasi liikumine CSS-i fontide kohta
font-style atribuut:
Kaks peamist stiili saab seada: 'tavaline' ja 'kursiiv'. Kaldkirjad peaksid oma olemuselt olema kaldu kaldu. Tavaline on vaikevalik, mis on sirge. On veel üks vähem kasutatud valik nimega ‘kaldus’, mis sarnaneb enamikus fontides kursiiviga. Samuti saate stiili seada ‘pärima’, nii et see võtaks fondi stiili oma vanemelemendilt.
| Näide 2: fondi stiili valikud | |
| font-family: verdana font-style: normaalne fondi suurus: 15 | Verdana tavaline font |
| font-family: verdana font-style: kursiiv fondi suurus: 15 | Verdana kaldkirjas |
| font-family: verdana font-style: kaldus fondi suurus: 15 | Verdana kaldus font |
Selle artikliga edasi liikumine CSS-i fontide kohta
font-weight atribuut:
See atribuut otsustab, kas font peaks olema paks või õhuke. Selle saab määrata kas tavaliseks või paksuks. Vaikeväärtus on normaalne. Selle väärtuse saab seada ka numbriliseks. Kaal 400 tähistab normaalset ja 700 on rasvane. Muud seaded on vähe (vahemikus 100 - väga kerge kuni 900 - väga paks), kuid neid ei toeta kõik fondid. Kõik kaaluvõimalused on näidatud näites 3.
| Näide 3: Fondi kaalu valikud | |
| font-family: verdana fondi kaal: normaalne fondi suurus: 15 | Verdana normaalkaal |
| font-family: verdana fondi kaal: paks fondi suurus: 15 | Verdana julge kaal |
| font-family: verdana fondi kaal: 500 fondi suurus: 15 | Verdana arvuline kaal |
Selle artikliga edasi liikumine CSS-i fontide kohta
font-size atribuut:
Atribuuti size saab määrata mitmel viisil. Allpool loetleme need viisid.
● Loendatud väärtus, näiteks „keskmine”, „suur”. Nii nagu rõivaste suurused, võivad ka väärtused ulatuda XX väikesest kuni XX suureni!
● Määra vanemelemendi suhtes suuremaks või väiksemaks.
● Protsent vanemelemendi suurusest.
● Emaelemendi suuruse otse omistamiseks määrake pärimiseks.
● Absoluutväärtusena px (pikslid), pt (punktid) või cm (sentimeeter) ühikutes
Selle parameetri jaoks seatakse vaikeväärtus ‘Keskmine’.
Selle artikliga edasi liikumine CSS-i fontide kohta
font-family atribuut:
HTML-is on CSS-i fondipere fondi nime määramiseks. Võite märgendiga lihtsalt lisada ühe fondi nime. Või saate määrata mitu väärtust fondiperekonna loendina, mis määratleb prioriteedi, milles brauser peaks fondi valima.
Nimekiri on seatud prioriteediks vasakult paremale, varusüsteemi kujul. Valitakse esimene väärtus, kui see on saadaval, või kontroll läheb järgmisele, kuni loendi lõpp on käes. Vaikefontide perekond on määratletud brauseri eelistustes.
CSS-i fondipered on kahte tüüpi - üldised perekonnad ja fondipered.
● Üldised perekonnad - mõnede üldiste omaduste põhjal rühmitatakse fonte järgmiselt: „serif”, „sans serif”, „monospace” jne. Näiteks tähendab Sans serif fonte ilma serif-stiilita.
● Perekonnanimed - konkreetsetesse perekondlikesse hierarhiatesse kuuluvad fondid. Times, Arial, Courier on kõik fontide perekonnad ja Times New Roman on Timesi perekonna näidisfont.
Erinevad fondiperekonna kasutusvalikud on loetletud allpool näites 4.
| Näide 4: Fondipere valikud | |
| font-family: verdana | Verdana üks font |
| font-family: “Times New Roman”, Times, Courier | Times New Roman, millele järgnesid fontide perekonnad |
| font-perekond: Arial, mahtuniversaal, sans-serif | Arialile järgnevad geneerilised perekonnad |
Mõned levinumad märkused
● Nagu mitmed teised CSS-i atribuudid, on ka mõned fonti sätted erinevates brauserites erinevad. Enne mõne haruldase fondisätte kasutamist kontrollige brauseri tuge.
● Fondisätteid saate eraldi määrata, kasutades fondi stiili, fondi kaalu jms üksikuid silte. Kui eelistate kompaktset koodi, võite kasutada lühikese fondi atribuuti kõigi väärtustega samal real.
● Kasutaja stsenaariumide puhul, kus soovite, et fondi suurus varieeruks sõltuvalt brauseri suurusest, on kasulik fondi suuruse säte, mida nimetatakse reageerivaks fondi seadeks. Seda saab seadistada vw-seadmega, mis tähendab 'vaateava laiust'. Nii järgib teksti suurus brauseriakna suurust.
Loodetavasti leidsite CSS-is fontide kohta teabe, mida otsisite. Jagage oma kogemusi meiega allpool olevas kommentaaride jaotises. Head kujundamist!
Microsofti sql-serveri õpetused algajatele
Kui soovite veebiarenduse kohta lisateavet saada, vaadake järgmist autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida, kuidas HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil luua muljetavaldavaid veebisaite ja juurutada see Amazon Simple Storage Service'i (S3).