Kako najbolje iskoristiti fontove u CSS-u?

Ovaj će vas članak upoznati s jednostavnom, ali važnom temom koja je Fontovi u CSS-u, a također će vam pružiti praktične demonstracije na tu temu.

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,

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 

Izlaz - Font u CSS-u - Edureka

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.

Primjer 2: Opcije stila fonta
obitelj fontova: verdana

stil fonta: normalan

veličina slova: 15

Verdana normalni font
obitelj fontova: verdana

stil fonta: kurziv

veličina slova: 15

Verdana kurziv font
obitelj fontova: verdana

stil fonta: kosi

veličina slova: 15

Verdana kosi font

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.

Primjer 3: Opcije težine fonta
obitelj fontova: verdana

razlika između sučelja i klase u javi

težina fonta: normalno

veličina slova: 15

Verdana normalne težine
obitelj fontova: verdana

font-weight: podebljano

veličina slova: 15

Verdana podebljana težina
obitelj fontova: verdana

težina fonta: 500

veličina slova: 15

Verdana numerička težina

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?
Primjer 4: Opcije obitelji fontova
obitelj fontova: verdanaVerdana jedan font
obitelj fontova: “Times New Roman”, Times, CourierTimes New Roman, a slijede obitelji fontova
obitelj fontova: Arial, monovolumen, sans-serifArial slijede generičke obitelji

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).