Kako najbolje iskoristiti fontove u CSS-u?

Ovaj će vas članak upoznati s jednostavnom, ali važnom temom koja je Fonts In a održat će vam i praktičnu demonstraciju na tu temu. U ovom će članku biti obrađeni sljedeći smjerovi,

• Fontovi u CSS-u
• Atributi u CSS fontu
• atribut stila fonta
• atribut font-weight
• atribut veličine fonta
• atribut obitelji fontova

Web stranice prenose sadržaj u obliku slika, audio, video i tekstualnog sadržaja. Međutim, većina web stranica i dalje se oslanja na tekst kao prevladavajući format. To je zato što običan tekst nudi neke vrlo značajne prednosti.

Nenametljiva čitljivost - želite provjeriti najnovije rezultate mečeva dok ste u uredu. Očito želite brzo ažuriranje teksta, a ne bučni videozapis!
Uvjet za malu propusnost mreže - Tekstualni sadržaj može se učitati čak i u područjima s lošom internetskom vezom, dok bogati mediji ne mogu.
Prilagođeno pretraživanju - web stranice uvijek prate koliko lako njihov sadržaj bude primijećen na tražilicama. Tekst je za to najprikladniji, barem dok AI u potpunosti ne preuzme internet!

Dok formatiraju tekstualni sadržaj, web dizajneri imaju samo nekoliko parametara za rad - font, poravnanje, isticanje i boju. Odabir pravog fonta za vaš tekst presudan je izbor. Standardna praksa je korištenje CSS oznaka fonta za definiranje fontova za tekst na HTML stranicama.
Ako ste novi u svijetu HTML programiranja, ovdje potražite osnovnu početnu turneju. Možda ćete htjeti pročitati osnove CSS-a prije nego što nastavite s učenjem o CSS fontovima.

Za opsežni CSS vodič, posjetite Edureka CSS vodič za početnike. Dobit ćete izvrsnu informaciju o načinu na koji će se CSS koristiti za proširenje HTML web dizajna.

Nastavljamo s ovim člankom o Fontovima u CSS-u

Fontovi u CSS-u

Font je u osnovi skup karakteristika povezanih s prikazom teksta. Fontovi se međusobno razlikuju po veličini, udubljenju, širini, nagibu i tako dalje. Počnimo s osnovnim prikazom teksta u različitim fontovima.

Primjer 1: Naslovi i odlomci u raznim fontovima

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: kurziv podebljano 12px / 30px Georgia, serif}
Odlomak kurzivnim podebljanim fontom Georgia
 

 Primjer 1: Izlaz 

U primjeru 1 imamo 3 različita retka teksta u različitim fontovima. Primijetili biste da se svaki font razlikuje u širini znakova, udubljenjima itd.

kako pretvoriti double u int

Nastavljamo s ovim člankom o Fontovima u CSS-u

Atributi u CSS fontu

CSS fontovi imaju 4 primarna atributa - stil, težinu, veličinu i obitelj. Atribut style označava normalno ili kurziv. Ponder prikazuje font kao običan ili podebljan. Težina se također može izraziti numerički. Veličina je jednostavno veličina fonta veća je veličina, veći je izgled teksta. Postoji više načina na koje se može dodijeliti veličina fonta, detaljni opisi dati su u sljedećim odjeljcima. Atribut obitelji je dodijeliti naziv fonta tekstu.

U primjeru 1 koristili smo različita imena fontova za naslove i odlomke. Ispod oznaka h1 i p vidimo navedena dva naziva fontova, dok oznaka h2 naziva samo jedan font. Ovo je definicija porodice fontova, o tome više kasnije.

Nastavljamo s ovim člankom o Fontovima u CSS-u

atribut stila fonta:

Dva primarna stila koja se mogu postaviti su 'normalan' i 'kurziv'. Kurziv bi trebao biti kurzivne naravi s kosim nagibom. Normalno je zadana opcija koja je ravna. Postoji još jedna manje korištena opcija pod nazivom 'koso', koja u većini fontova sliči kurzivnoj opciji. Također možete postaviti stil da nasljeđuje tako da uzima stil fonta iz nadređenog elementa.

Nastavljamo s ovim člankom o Fontovima u CSS-u

atribut font-weight:

Ovaj atribut odlučuje hoće li font izgledati debeo ili tanak. Može se postaviti na 'normalno' ili 'podebljano'. Zadana vrijednost je normalna. Ova se vrijednost može postaviti i kao numerička. Težina 400 predstavlja normalno, a 700 je podebljano. Postoji nekoliko drugih postavki (od 100 - vrlo lagano do 900 - vrlo podebljano), ali ih ne podržavaju svi fontovi. Sve opcije težine prikazane su u primjeru 3.

Nastavljamo s ovim člankom o Fontovima u CSS-u

atribut veličine fonta:

Atribut veličine može se postaviti na više načina. Navedimo dolje ove načine.
● Nabrojana vrijednost poput 'srednja', 'velika'. Zapravo baš kao i veličine odjeće, vrijednosti se mogu kretati od XX Male do XX Large!
● Postavite u odnosu na njegov nadređeni element, kao 'veći' ili 'manji'.
● Postotak veličine nadređenog elementa.
● Postavite kao 'naslijedi' za izravno usvajanje veličine nadređenog elementa.
● Kao apsolutna vrijednost u jedinicama px (pikseli), pt (točke) ili cm (centimetar)
‘Srednje’ je zadana vrijednost postavljena za ovaj parametar.

Nastavljamo s ovim člankom o Fontovima u CSS-u

atribut obitelji fontova:

U HTML-u porodica CSS fontova služi za postavljanje naziva fonta. Uz oznaku možete staviti samo jedno ime fonta. Ili možete dodijeliti više vrijednosti kao popis obitelji fontova koji definira prioritet u kojem bi preglednik trebao odabrati font.
Popis je prioritet s lijeva na desno, u obliku zamjenskog sustava. Odabere se prva vrijednost ako je dostupna ili kontrola prelazi na sljedeću, sve dok se ne dosegne kraj popisa. Zadana obitelj fontova definirana je postavkama preglednika.
CSS obitelji fontova su dvije vrste - generičke obitelji i obitelji fontova.
● Generičke obitelji - na temelju nekih općih karakteristika, fontovi su grupirani kao „serif“, „sans serif“, „monospace“ itd. Na primjer, Sans serif znači fontovi bez stila serifa.
● Obiteljska imena - fontovi koji pripadaju određenim obiteljskim hijerarhijama. Times, Arial, Courier su sve obitelji fontova, a Times New Roman je primjer fontova obitelji Times.
Razne mogućnosti korištenja obitelji fontova navedene su u primjeru 4 dolje.

što je znanost o podacima?

Neke uobičajene napomene

● Kao i nekoliko drugih CSS svojstava, neke se postavke fonta razlikuju u različitim preglednicima. Prije upotrebe nekih rijetkih postavki fonta potražite podršku za preglednik.
● Postavke fonta možete zasebno postaviti pomoću pojedinačnih oznaka stila fonta, težine fonta itd. Ako želite kompaktni kôd, možete koristiti atribut stenografskog fonta sa svim vrijednostima u istom retku.
● U korisničkim scenarijima u kojima želite da veličina fonta varira ovisno o veličini preglednika, postoji korisna postavka veličine fonta koja se naziva responzivna postavka fonta. Može se postaviti s vw jedinicom, što znači 'širina vidnog polja'. Na taj će način veličina teksta slijediti veličinu prozora preglednika.

Nadam se da ste pronašli informacije koje ste tražili na fontovima u CSS-u. Podijelite svoje iskustvo s nama u odjeljku za komentare u nastavku. Sretno dizajniranje!

Ako vas zanima više o web-razvoju, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).