Veličina fonta je bitna u html-u važna uloga. Omogućuje vam da privučete pozornost korisnika važna informacija, objavljeno na stranici stranice. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.
Oznake i atributi pri radu s html fontovima
Jezik hiperteksta ima širok raspon alata za rad s fontovima. Uostalom, oblikovanje teksta je glavni zadatak html-a.
Razlog za stvaranje HTML jezika bio je problem prikazivanja pravila oblikovanja teksta u preglednicima.
Pogledajmo oznake koje se koriste za rad s fontovima u HTML-u i njihove atribute. Glavna je oznaka . Pomoću vrijednosti njegovih atributa možete postaviti nekoliko karakteristika fonta:
- boja – postavlja boju teksta;
- veličina – veličina slova u konvencionalnim jedinicama.
Podržane su pozitivne vrijednosti atributa od 1 do 7.
- lice – koristi se za postavljanje obitelji fontova teksta koji će se koristiti unutar oznake . Podržano je nekoliko vrijednosti odvojenih zarezima.
Formira se samo tekst koji se nalazi između dijelova para oznaka fonta. Ostatak teksta prikazuje se standardnim zadanim fontom.
Također u html-u postoji niz uparenih oznaka koje određuju samo jedno pravilo oblikovanja. To uključuje:
- - postavlja u html podebljani font. Označiti sličan u djelovanju prethodnom;
- — veličina je veća od zadane;
- — manje veličine font;
- — kurzivni tekst(kurziv). Slična oznaka ;
- — tekst s podvlačenjem;
- prekrižen;- - prikaz teksta samo u mala slova;
- - velikim slovima.
Običan tekst
Sličica
Sličica
Više nego inače
Manje nego inače
Kurziv
Kurziv
S podvlakom
Prekrižen
Mogućnosti atributa stila
Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje generičkog atributa stila. Pomoću vrijednosti njegovih svojstava možete postaviti stil prikaza fontova:
1) font-family – svojstvo postavlja obitelj fontova. Moguće je ispisati više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost dogodit će se ako prethodna obitelj nije postavljena na operacijski sustav korisnik.
Sintaksa pisanja:
obitelj-fontova: naziv-fonta [, naziv-fonta[, ...]]
2) veličina fonta – veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u HTML-u.
Sintaksa pisanja:
veličina-fonta: apsolutna veličina | relativna veličina | značenje | kamata | naslijediti
Također možete postaviti veličinu fonta:
- U pikselima;
- U apsolutnom smislu ( xx-mali, x-mali, mali, srednji, veliki);
- U postocima;
- U bodovima (pt).
Veličina slova: 7
Veličina fonta: 24 px
Veličina fonta: x-veliko
Veličina fonta: 200%
Veličina fonta: 24 pt
3) font-style – postavlja stil pisanja fonta. Sintaksa:
stil fonta: normalan | kurziv | koso | naslijediti
Vrijednosti:
- normalno – normalan pravopis;
- kurziv – kurziv;
- oblique – font nakošen udesno;
- naslijediti – nasljeđuje pravopis nadređenog elementa.
Primjer kako promijeniti font u html-u pomoću ovog svojstva:
font-style: naslijediti
font-style:kurziv
font-style:normal
font-style: oblique
4) font-variant – prevodi sve velika slova u glavnim gradovima. Sintaksa:
varijanta fonta: normalno | mala slova | naslijediti
Primjer kako promijeniti font u html-u s ovim svojstvom:
font-varijanta: naslijediti
font-varijanta:normalno
font-varijanta: mala velika slova
5) font-weight – omogućuje vam postavljanje debljine teksta (zasićenost). Sintaksa:
težina-fonta: podebljano|podebljano|svjetlije|normalno|100|200|300|400|500|600|700|800|900
Vrijednosti:
- podebljano – postavlja html font podebljano;
- hrabriji – hrabriji u odnosu na normalno;
- svjetlije - manje zasićeno u odnosu na normalno;
- normalno – normalan pravopis;
- 100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.
težina fonta: podebljano
font-weight:bolder
font-weight:lighter
težina-fonta: normalna
težina slova: 900
težina slova:100
html svojstvo fonta i boju fonta
Font je još jedno svojstvo spremnika. U sebi je kombinirao vrijednosti nekoliko svojstava namijenjenih za promjenu fontova. sintaksa fonta:
font: veličina fonta obitelj-fontova | naslijediti
Također, vrijednost se može postaviti na fontove koje sustav koristi u natpisima na raznih elemenata kontrole:
- natpis - za gumbe;
- ikona – za ikone;
- jelovnik - jelovnik;
- okvir za poruke – za dijaloške okvire;
- mali natpis – za male kontrole;
- status-bar – font statusne trake.
font: ikona
font:naslov
font:izbornik
font:box-poruka
mali natpis
font: statusna traka
font:kurziv 50px bold "Times New Roman", Times, serif
Kvalitetan izgled web stranice ima Glavni cilj— učiniti informacije na stranici što čitljivijim i praktičnijim za korisnika. A rad s tekstom pomoću html-a glavna je i osnovna vještina koju morate imati kada radite s web stranicama. Ovaj članak opisuje kako promijeniti veličinu teksta pomoću Web Markup Language.
Formatirajte tekst pomoću HTML-a - vrlo je jednostavno
Svi koji su se barem jednom susreli s potrebom izrade ili uređivanja web stranica prvo su se zapitali kako oblikovati tekst tako da zadovolji željene zahtjeve. Postoji mnogo načina da se izvrši ovaj zadatak, a najlakši način je da to učinite izravno u okviru same stranice koristeći označni jezik. Nakon što shvatite kako promijeniti veličinu fonta u HTML-u, to neće predstavljati nikakve poteškoće u budućnosti.
U ovom ćemo materijalu detaljno govoriti o tome kako se fontovi formatiraju u HTML dokumentima.
Opća načela uređivanja teksta na web stranicama
Prvo, moramo razumjeti koje nam mogućnosti html daje za oblikovanje teksta. Tri su glavne karakteristike fonta: tip slova (karakteristika koja određuje izgled slova i znakova), boja i veličina. Čitljivost bilo kojeg dokumenta ovisi o tome koliko su te karakteristike dobro kombinirane.
Karakteristike teksta u HTML oznakama mijenjaju se pomoću oznaka i atributa. Oznaka je glavna komponenta jezika, njegova glavna logička jedinica, a atribut se koristi za postavljanje određene vrijednosti za svaki element stranice označen oznakom.
Također imajte na umu da prikaz teksta može varirati tijekom korištenja. različitim preglednicima, stoga, prije dovršetka rada na stranici, morate se uvjeriti da su informacije ispravno prikazane u svim glavnim preglednicima koji se koriste. Na primjer, veličina fonta u html-u kada se koriste starije verzije Internet Explorer mogu se razlikovati u usporedbi s novijim verzijama.
Označiti
Glavne oznake koje se koriste prilikom oblikovanja teksta na web stranici su I .
Uparena oznaka odgovoran je za sve karakteristike formatiranog teksta, koje su navedene pomoću odgovarajućih atributa. Ova je oznaka najrazumljivija i najprikladnija za korištenje prilikom postavljanja stranica.
Budući da nas prvenstveno zanima kako promijeniti veličinu fonta u html-u, morat ćemo koristiti atribut veličine.
Ovako izgleda:
Tekst ide ovdje
Vrijednost veličine html font navedeni u brojčanim jedinicama od 1 (najmanji) do 7 (najveći). Tradicionalno se uzima da je prosječna vrijednost 3 (što odgovara veličini 13,5 u fontu Times New Roman).
Sukladno tome, ako u tijelo dokumenta dodate sljedeći kod, tada kada otvorite stranicu u pregledniku, vidjet ćete kako se veličina teksta mijenja ovisno o postavljenoj vrijednosti.
Veličina fonta 1
Veličina fonta 2
Veličina fonta 3
Veličina fonta 4
Veličina fonta 5
Veličina fonta 6
Veličina fonta 7
Osim apsolutnih numeričkih vrijednosti, mogu se koristiti i relativne. Ova oznaka se također koristi za ovo. Veličina html fonta, kao što je gore spomenuto, postavljena je na 3 prema zadanim postavkama, tako da na temelju toga možete dodati ili oduzeti cjelobrojne numeričke vrijednosti kako biste dobili željeni rezultat. Ovako to izgleda:
Tekst ide ovdje
Na navedena vrijednost veličina fonta bit će postavljena na 6. U svom pregledniku možete provjeriti kako to funkcionira i eksperimentirati s njim razne kombinacije brojčane vrijednosti.
Korištenje oznake Možete promijeniti veličinu i boju fonta u html-u. Za promjenu boje koristite atribut boje i heksadecimalni kod boje.
Da biste izvršili potrebne promjene, atributi slijede jedan za drugim u tijelu jedne oznake , nema potrebe odvajati ih interpunkcijskim znakovima.
Označiti
Ova oznaka ima širi raspon mogućnosti i karakteristika od . Obično se koristi u kombinaciji s CSS-om za uređivanje i stiliziranje određenih dijelova dokumenta.
Za ovu oznaku vrijednosti se postavljaju pomoću atributa stila. Ovako to izgleda u kodu:
Tekst ide ovdje
Kao što vidite, ovdje se koristi CSS kod (font-size), a veličina se postavlja pomoću bodova (pt, point). Standardna vrijednost je 12pt, koja se može promijeniti povećanjem ili smanjenjem za cijeli broj.
Promjena veličine fonta prilikom oblikovanja naslova
Često trebate smanjiti ili povećati veličinu fonta u html-u kada uređujete naslove. U u ovom slučaju zadatak nije samo promijeniti veličinu, već i logički odabrati određeni dio tekst i dodijelite ga kao naslov bloku teksta.
U ovom slučaju, preporučljivo je koristiti oznake
— . Označiti - Ovo je naslov prve razine. Bit će prikazan najveći u pregledniku, a oznake iz prije koristi se za isticanje podnaslova.
- Ovo je naslov prve razine. Bit će prikazan najveći u pregledniku, a oznake iz prije koristi se za isticanje podnaslova.
koristi se za isticanje podnaslova.
Zaglavlje prve razine
Specifični parametri za ovu oznaku postavljaju se pomoću CSS-a - na taj način možete postaviti određenu veličinu teksta, boju i font.
Dakle, pogledali smo glavne načine promjene veličine fonta u html-u. Ove su informacije dovoljne za izradu web stranice čistog izgleda koju je lako čitati.
Radi praktičnosti, uzmite u obzir sljedeće preporuke:
- Prilikom dizajniranja ne biste se trebali ograničiti na HTML. Nakon što svladate osnove izrade web stranice, možete početi učiti CSS. Ovo će otvoriti nove horizonte u izradi web stranica.
- Ne smije se zanemariti testiranje gotove web stranice u različitim preglednicima i na različitim platformama. Kao što je gore spomenuto, tekstualni parametri mogu se značajno razlikovati, posebno kada se koriste zastarjele verzije preglednika.
- Prilikom pisanja koda uvijek biste trebali koristiti razmake i tabulatore. To olakšava čitanje i razumijevanje.
- Komentari koda nisu samo alat za lako razumijevanje, već i znak dobrog ponašanja među programerima.
Kako promijeniti veličinu fonta u HTML-u na web stranici.
Naš život sastoji se od svakodnevnih sitnica koje na ovaj ili onaj način utječu na naše blagostanje, raspoloženje i produktivnost. Nisam se dovoljno naspavao - boli me glava; Popio sam kavu da popravim situaciju i oraspoložim - ali sam postao razdražljiv. Stvarno želim sve predvidjeti, ali jednostavno ne mogu. Štoviše, svi okolo, kao i obično, daju savjete: gluten u kruhu - ne prilazi mu, ubit će te; Čokoladica u džepu izravan je put do gubitka zuba. Prikupljamo najpopularnija pitanja o zdravlju, prehrani, bolestima i dajemo odgovore na njih koji će vam omogućiti da bolje razumijete što je dobro za vaše zdravlje.
Pozdrav svim čitateljima ovog članka i pretplatnicima mog bloga! Današnju publikaciju želim posvetiti temi bez znanja o kojoj vaši internetski resursi neće biti čitljivi i atraktivni: "Kako postaviti font u HTML-u." Sama tema je laka i siguran sam da ćete je brzo savladati.
Međutim, ne bismo trebali zaboraviti da su web jezici bogati svim vrstama alata za dizajn fontova koje, idealno, trebate znati. Nakon čitanja članka s pouzdanjem ćete svladati oblikovanje teksta, naučiti kako postaviti različite stilove, vrste stilova fonta i ukrasa, kao i promijeniti veličinu i boju kako rečenica tako i pojedinačnih slova. Započnimo!
Fontovi su različiti
Većina znakova, tiska i literature, web stranica i drugih usluga koristi se standardne fontove. Iako su udobne, odavno su dosadile i ne upadaju u oči. Zbog toga mnogi dizajneri malo mijenjaju vrstu dizajna ili stvaraju potpuno nove stilove. Najpoznatiji i najutjecajniji fontovi su:
- Helvetica;
- Futura;
- Garamond;
- Bodoni;
- Bembo;
- Rockwell;
- Times New Roman.
Njihove glavne razlike leže u odnosu prema određenim obiteljima. Postoje obitelji serif (serif), sans serif, ukrasni, kurziv i monospace.
Također želim naglasiti da postoji 5 veličina fonta.
Počnimo s html jezikom i njegovim “kreativnim sposobnostima”
Ime prvi Zaglavlje
P podnaslov sa crvenim slovom!
Ovdje se nalazi prvi paragraf Trenutno primjer. Radi jasnoće ove riječi bit će napisano kurzivom.
Dopustite mi da vas podsjetim da atribut poravnaj = "centar" postavlja tekst koji će biti prikazan u sredini.
A sada je došlo vrijeme da css pokaže svoje vještine
Unatoč cijelom nizu različitih oznaka koje nudi html, css je praktičniji i fleksibilniji alat za dizajniranje izgled fontovi.
Glavna svojstva koja se koriste za formatiranje sadržaja su: font i njegove komponente: tekst-ukras.
Pogledajmo to prvo font. Ovaj univerzalni parametar, zahvaljujući kojem možete postaviti nekoliko vrijednosti u isto vrijeme. Osim toga, svaki parametar radi s vlastitim ključnim riječima.
| Naziv nekretnine | Ključne riječi |
| obitelj-fontova | Mogu se instalirati kao standardne obitelji fontova: · bez serifa (sans-serif); · starinski (serif); · dekorativni (fantazija); · kurziv (kurziv); · monospace (monospace), Isto kao standard postojeće stilove(Arial, Calibri itd.). |
| veličina fonta | Za postavljanje apsolutne veličine simbola koriste se sljedeće oznake: xx-mali, x-mali, mali, srednji, veliki, x-veliki, xx-veliki. Također možete navesti jedinstvenu vrijednost. |
| težina fonta | Odgovoran za zasićenost stila teksta. Promjene u rasponu ili je navedeno korištenjem riječi normalno, podebljano, svjetlije ili podebljano. |
| font-varijanta | Određuje prikaz slova koristeći ključne riječi mala velika slova, normalno ili naslijediti. |
| stil fonta | Postavlja normalno, koso, kurziv ili nasljeđuje roditelja. |
| font-stretch | Označava gustoću slova. Mogu se specificirati sljedeće vrijednosti: ultra-kondenzirano, ultra-prošireno, ekstra-kondenzirano, ekstra-prošireno, polu-kondenzirano, polu-prošireno, normalno, prošireno, kondenzirano i naslijeđeno. |
Vlasništvo tekst-ukras pomaže u ukrašavanju teksta dodatnim elementima kao što je podcrtavanje ( naglasiti), precrtano ( line-through), nadcrtano ( nadcrtati), a također nasljeđuju parametre nadređenog ( naslijediti) ili otkažite sve registracije ( nikakav).
Sada je vrijeme za drugi primjer. Uzeo sam prethodni kod i formatirao ga koristeći znači css. Dakle, naslov je ukrašen sjenom (koristeći svojstvo tekst-sjena) i s obrisom oko ( granica-boja). Istovremeno sam jednu riječ povećao. Također sam želio koristiti parametar neprozirnost za postavljanje prozirnosti podnaslova.
Ime prvi Zaglavlje
Proziran titl!
Ovdje se nalazi prvi paragraf Trenutno primjer. Radi jasnoće ove riječi bit će napisano kurzivom.
Omogućuje vam da označite tekst kurzivom, kurzivom ili obrnuto kako biste napravili tekst standardni prikaz. Ova nekretnina ima samo tri značenja:
- normalno - standardni tekst s normalnim stilom, to jest, nije kurziv ili kurziv
- italic - kurzivni stil
- oblique – kosi stil
Paragraf s normalnom vrijednošću.
Stavak s kurzivom.
Paragraf sa značenjem koso.
Pokušajte »Kurzivni fontovi tradicionalno su stilizirane verzije pisma temeljene na kaligrafiji, dok su kurzivi stvoreni jednostavnim zbrajanjem blagi nagib prema simbolima. Većina fontova ne sadrži kurzivni skup znakova, tako da preglednik često koristi kosi algoritam za tekstualne znakove. To znači da u mnogim slučajevima nećete vidjeti razliku između kurzivnih i kosih vrijednosti.
Veličina fonta
Promjena veličine fonta u elementu - dobar način vizualno ga istaknuti i dati mu značaj, ili obrnuto, pokazati to ova informacija ne bi trebalo privlačiti povećanu pozornost.
Za promjenu veličine fonta upotrijebite svojstvo veličine fonta. Postoji nekoliko načina za određivanje veličine fonta, pogledajmo najčešće:
pikseli
Često se koriste vrijednosti piksela jer ovaj pristup pruža vrlo precizna kontrola preko veličine. Numerička vrijednost završava abecednim znakovima px, koji moraju odmah iza broja (između broja i px ne smije biti razmaka).
Tijelo (veličina fonta: 14px; )
Interes
Zadana veličina fonta u preglednicima je 16 px. Dakle, vrijednost od 100% je 16px, a 200% je 32px. Ako definirate pravilo koje govori sav tekst unutar elementa
vrijednost 75% zadane veličine (ovo će odgovarati 12px), a zatim definirajte drugo pravilo koje postavlja vrijednost na 75% za to element djeteta, tada će veličina fonta u ovom elementu biti 9px (tj. 75% od 12px).Tijelo (veličina fonta: 100%; )
E.M.
Jedinica em vam omogućuje promjenu veličine fonta u odnosu na veličinu fonta nadređenog elementa. Budući da je zadana veličina fonta u preglednicima 16 piksela, možete koristiti pravila slična onima koja se koriste za postotke.
Tijelo (veličina fonta: 14px; ) h2 (veličina fonta: 1,2em; )
U primjeru smo postavili element
veličina fonta je 14px, a za sve elemente- 1,2 em. To znači da će veličina fonta naslova druge razine biti skalirana s faktorom 1,2. U našem slučaju, veličina svih zaglavlja bit će veličina fonta od 1,2 elementa , što znači 1,2 puta veće od 14px i približno je jednako 17px. (Stvarna veličina bit će 16,8, ali većina će je preglednika zaokružiti na 17.)
Napomena: postoci i ems su u biti dva različita načina za postizanje istog cilja. Oba pružaju mogućnost postavljanja veličine u odnosu na veličinu fonta nadređenog elementa.
Ključne riječi
CSS nudi sedam ključnih riječi koje vam omogućuju dodjeljivanje veličine fonta u odnosu na zadanu veličinu (16px): xx-malo, x-malo, malo, srednje, veliko, x-veliko i xx-veliko.
P (veličina fonta: mali; )
Srednja je zadana veličina fonta u preglednicima. Preostale vrijednosti smanjuju ili povećavaju veličinu fonta različitim čimbenicima. Najmanja veličina fonta, xx-small, je približno 9 piksela, pri čemu je svaka sljedeća veličina približno 20% veća od prethodne:
Promjena veličine pomoću postotaka.
Promjena veličine pomoću piksela.
Promjena veličine pomoću ključne riječi x-small.
Svi smo koristili poznati uređivač teksta Word. A znamo da je vrlo lako promijeniti font, veličinu i boju teksta. Dakle, u html-u također možete postaviti ove parametre bez većih poteškoća. Za ovo postoji oznaka . Uparen je i stoga ima završnu oznaku, jer preglednik treba razumjeti gdje je početak i kraj teksta za koji mijenjamo parametre. Označiti ima tri atributa: lice, veličinu i boju, koji određuju font, veličinu i boju teksta. U ovom vodiču pobliže ćemo pogledati fontove.
Do promijeniti font teksta u html-u– datoteku, tekst moramo staviti u oznake I i obavezno se prijaviti atribut lica. Ovako izgleda:
naš tekst
Imena fontova mogu se vidjeti u uređivaču Worda. Dug je popis. Uzmimo primjer kako promijeniti font teksta u html-u i napišite sljedeći kod:
Ovaj će tekst biti napisan zadanim fontom
Ovaj tekst će biti napisan Batang fontom
Ovaj tekst će biti napisan fontom Comics Sans MS
Spremimo datoteku pod bilo kojim imenom i vidimo što će se dogoditi:
Kao što vidimo, sve je funkcioniralo: prvi odlomak ima zadani font, u drugom odlomku postavili smo Batang font, a u trećem se tekst prikazuje u fontu Comic Sans MS. U principu, sve je lako i razumljivo, ali postoji jedna primjedba. Budući da navedeni font nije spremljen u HTML datoteci, nema jamstva da će biti prikazan na očekivani način u pregledniku. Ne možemo biti 100% sigurni da računalo posjetitelja ima font koji smo naveli, pogotovo ako taj font nije standardni. Stoga je u atributu face bolje naznačiti otprilike tri naziva fonta, koji su navedeni odvojeni zarezima, tako da barem jedan od njih bude sigurno prikazan. Pogledajmo primjer:
Ovaj bi se tekst trebao pojaviti u Batang ili Comic Sans MS, ili svakako u Arialu.
Pogledajmo rezultat:
Tekst je prikazan u fontu Batang, koji smo prvi naveli u atributu lica. Ako ovaj font ne radi u pregledniku posjetitelja, tada će raditi drugi font - Comic Sans MS, a ako ovaj font ne radi, onda će tekst sigurno biti prikazan u Arial fontu.
Ostale mogućnosti fonta
I za početak, pogledajmo druge opcije fontova. U prvoj lekciji već smo pogledali oznake koje postavljaju podebljano i kurziv, to su oznake I odnosno. Pogledajmo još nekoliko oznaka koje postavljaju stil fonta:
Podcrtajmo tekstPrecrtajmo ovaj dio
i postavite nadnaslov na riječ vrh
Pogledajmo rezultat:
Cijeli tekst postavili smo na font Comic Sans MS, prvi redak je podvučen pomoću oznake , zapamtite iz prve lekcije da je oznaka
prenosi u nova linija, drugi red je prekrižen zahvaljujući oznaci i u zadnjem redu smo postavili superskript riječ "vrh". Ništa komplicirano! Možete sami eksperimentirati s ostalim oznakama. Ako vam je sve jasno, možete prijeći na sljedeću lekciju u kojoj ćemo pogledati kako postaviti veličinu teksta, ali ako još imate pitanja, pogledajte detaljan video ovu lekciju.
