U html-u veličina fonta igra važnu ulogu. Omogućava vam da skrenete pažnju korisnika na važne informacije objavljene na stranici stranice. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i porodica.
Oznake i atributi pri radu sa html fontovima
Jezik hiperteksta ima veliki skup alata za rad sa fontovima. Uostalom, formatiranje teksta je glavni zadatak html-a.
Razlog za stvaranje HTML jezika bio je problem prikazivanja pravila oblikovanja teksta od strane pretraživača.
Razmotrite oznake koje se koriste za rad sa fontovima u html-u i njihove atribute. Glavna je oznaka . Koristeći vrijednosti njegovih atributa, možete postaviti nekoliko karakteristika fonta:
- boja - postavlja boju teksta;
- veličina – veličina fonta u konvencionalnim jedinicama.
Podržana je pozitivna vrijednost atributa od 1 do 7.
- lice - koristi se za postavljanje porodice fontova teksta koji će se koristiti unutar oznake . Podržano je više vrijednosti, odvojenih zarezima.
Formatira se samo tekst koji se nalazi između dijelova uparene oznake fonta. Ostatak teksta se prikazuje u zadanom fontu.
Također u html-u postoji veliki broj uparenih oznaka koje definiraju samo jedno pravilo formatiranja. To uključuje:
- - postavlja podebljani font u html-u. Tag slično djelovanju prethodnom;
- - veličina je veća od zadane;
- - manja veličina slova;
- - kurziv tekst (kurziv). Slična oznaka ;
- — tekst sa podvlačenjem;
- precrtano;- — prikazivanje teksta samo malim slovima;
- - velikim slovima.
običan tekst
Thumbnail
Thumbnail
Više nego inače
Manje nego inače
Kurziv
Kurziv
Sa podvlačenjem
Precrtano
Mogućnosti atributa stila
Pored opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje atributa generičkog stila. Koristeći vrijednosti njegovih svojstava, možete postaviti stil prikaza fonta:
1) font-family - svojstvo postavlja porodicu fontova. Moguće je nabrojati više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost će se dogoditi ako prethodna porodica nije postavljena na korisnikov operativni sistem.
Sintaksa pisanja:
font-family: font-name [, font-name[, ...]]
2) font-size - 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:
font-size: apsolutna veličina | relativna veličina | vrijednost | interes | nasljediti
Također možete postaviti veličinu fonta:
- U pikselima;
- U apsolutnom smislu ( xx-mali, x-mali, mali, srednji, veliki);
- U procentima;
- U bodovima (pt).
veličina fonta:7
veličina fonta:24px
Veličina fonta: x-large
veličina fonta: 200%
veličina fonta:24pt
3) font-style - postavlja stil fonta. sintaksa:
stil fonta: normalan | kurziv | koso | nasljediti
vrijednosti:
- normalan - normalan pravopis;
- kurziv - kurziv
- kosi - font sa nagibom udesno;
- naslijediti - nasljeđuje pravopis nadređenog elementa.
Primjer kako promijeniti font u html-u koristeći ovo svojstvo:
font-style:inherit
font-style:italic
font-style:normal
font-style: oblique
4) font-varijanta - pretvara sva velika slova u velika. sintaksa:
font-varijanta: normalna | mala slova | nasljediti
Primjer kako promijeniti font u html-u sa ovim svojstvom:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight - omogućava vam da podesite debljinu pisanja teksta (zasićenost). sintaksa:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
vrijednosti:
- bold - postavlja html font na bold;
- podebljano - podebljanije u odnosu na normalno;
- lakši - manje zasićen u odnosu na normalan;
- normalan - normalan pravopis;
- 100-900 - postavlja debljinu fonta u numeričkim terminima.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
svojstvo fonta i boja html fonta
Font je još jedno svojstvo kontejnera. Interno je kombinirao vrijednosti nekoliko svojstava dizajniranih za promjenu fontova. Sintaksa fonta:
font: font-size font-family | nasljediti
Takođe, fontovi koje sistem koristi u oznakama na raznim kontrolama mogu se postaviti kao vrijednost:
- natpis - za dugmad;
- ikona - za ikone;
- meni - meni;
- box-box - za dijaloške okvire;
- small-caption - za male kontrole;
- statusna traka - font statusne trake.
font:icon
font:caption
font:meni
font:message-box
mali natpis
font: statusna traka
font:italic 50px bold "Times New Roman", Times, serif
Kvalitetan izgled web stranice ima glavni cilj - učiniti informacije na stranici što čitljivijim i jednostavnijim za korištenje. A rad sa tekstom preko html-a je glavna i osnovna vještina koju trebate imati kada radite sa web lokacijama. Ovaj članak opisuje kako promijeniti veličinu teksta koristeći Web Markup Language.
Formatiranje teksta pomoću HTML-a je jednostavno
Svi koji su se barem jednom suočili sa potrebom da kreiraju ili uređuju sajtove, prvo su se pitali kako formatirati tekst tako da ispunjava željene uslove. Postoji mnogo načina za postizanje ovog zadatka, a najlakši način da to učinite je direktno u okviru same stranice koristeći jezik za označavanje. Vrijedi jednom shvatiti kako se mijenja veličina fonta u html-u, a u budućnosti to više neće predstavljati poteškoće.
U ovom članku ćemo detaljno govoriti o tome kako se formatiranje fonta izvodi u html dokumentima.
Opći principi za uređivanje teksta na web stranicama
Prvo morate shvatiti koje nam opcije za formatiranje teksta daje html. Postoje tri glavne karakteristike fonta - font (karakteristika koja određuje izgled slova i znakova), boja i veličina. Čitljivost bilo kojeg dokumenta ovisi o tome koliko su ove karakteristike kompetentno kombinirane.
Karakteristike teksta u html markupu se mijenjaju pomoću oznaka i atributa. Oznaka je glavna komponenta jezika, njegova glavna logička jedinica, a atribut se koristi za postavljanje specifične vrijednosti za svaki element stranice označen oznakom.
Također morate imati na umu da se prikaz teksta može razlikovati kada koristite različite pretraživače, tako da prije nego što završite rad na stranici, morate se uvjeriti da su informacije ispravno prikazane u svim glavnim pretraživačima koji se koriste. Na primjer, veličina fonta u html-u pri korištenju starijih verzija Internet Explorera može se razlikovati od novijih verzija.
Tag
Glavne oznake koje se koriste prilikom oblikovanja teksta na web stranici su I .
Pair tag odgovoran je za sve karakteristike formatiranog teksta koje se postavljaju pomoću odgovarajućih atributa. Ova oznaka je najrazumljivija i najprikladnija za korištenje prilikom postavljanja stranica.
Pošto nas prvenstveno zanima kako promijeniti veličinu fonta u html-u, moramo koristiti atribut size.
izgleda ovako:
Evo teksta
Vrijednost veličine html fonta je data u numeričkim jedinicama od 1 (najmanji) do 7 (najveći). 3 se tradicionalno uzima kao prosječna vrijednost (odgovara veličini 13,5 u fontu Times New Roman).
Shodno tome, ako u tijelo dokumenta unesete sljedeći kod, tada, kada otvorite stranicu u pretraživaču, 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 brojčanih vrijednosti, mogu se koristiti i relativne. Ova oznaka se također koristi za ovo. Veličina html fonta, kao što je gore spomenuto, zadana je na 3, tako da odatle možete dodavati ili oduzimati cjelobrojne vrijednosti da biste dobili željeni rezultat. Ovako to izgleda:
Evo teksta
Sa navedenom vrijednošću, veličina fonta će odgovarati vrijednosti 6. Možete provjeriti u pretraživaču kako to funkcionira i eksperimentirati s različitim kombinacijama numeričkih vrijednosti.
Sa etiketom 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 , ne morate ih odvajati znakovima interpunkcije.
Tag
Ova oznaka ima širi spektar karakteristika i karakteristika od . Obično se koristi zajedno sa CSS-om za uređivanje i stilizovanje određenih delova dokumenta.
Za ovu oznaku vrijednosti se postavljaju pomoću atributa style. Ovako to izgleda u kodu:
Evo teksta
Kao što vidite, ovdje koristimo uvod u 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.
Veličina fonta se mijenja prilikom formatiranja naslova
Često morate smanjiti ili povećati veličinu fonta u html-u kada uređujete naslove. U ovom slučaju zadatak nije samo promijeniti veličinu, već i logički odabrati određeni dio teksta i dodijeliti ga kao zaglavlje tekstualnog bloka.
U ovom slučaju, preporučljivo je koristiti oznake
— . Tag je naslov prvog nivoa. U pretraživaču će biti prikazan kao najveći, a oznake iz prije koristi se za isticanje podnaslova.
je naslov prvog nivoa. U pretraživaču će biti prikazan kao najveći, a oznake iz prije koristi se za isticanje podnaslova.
koristi se za isticanje podnaslova.
Naslov prvog nivoa
Specifični parametri za ovu oznaku se postavljaju pomoću CSS-a - na ovaj način možete postaviti određenu vrijednost za veličinu teksta, njegovu boju i vrstu fonta.
Dakle, pogledali smo glavne načine za promjenu veličine fonta u html-u. Ove informacije su dovoljne za kreiranje web stranice uredno izgleda sa dobrom čitljivošću.
Radi praktičnosti, uzmite u obzir sljedeće preporuke:
- Prilikom postavljanja, ne biste trebali biti ograničeni na html alate. Nakon što savladate osnove izrade web stranice, možete početi učiti CSS. Ovo će otvoriti nove horizonte u kreiranju web stranica.
- Ne možete zanemariti testiranje gotove stranice u različitim pretraživačima i na različitim platformama. Kao što je gore spomenuto, parametri teksta mogu značajno varirati, posebno kada se koriste starije verzije pretraživača.
- Uvijek biste trebali koristiti razmake i tabulatore kada pišete kod. Ovo olakšava čitanje i razumijevanje.
- Komentari koda nisu samo alat za laku percepciju, već i znak dobrog ukusa među programerima.
Kako promijeniti veličinu fonta u html-u na web stranici.
Naš život se sastoji od svakodnevnih sitnica koje na ovaj ili onaj način utiču na naše blagostanje, raspoloženje i produktivnost. Nisam se dovoljno naspavao - boli me glava; popio kafu da popravi situaciju i oraspoloži - postao je razdražljiv. Zaista želim sve da predvidim, ali jednostavno ne ide. Štaviše, svi okolo, kao i obično, daju savjete: gluten u kruhu - ne približavajte se, ubiće; čokoladica u džepu je direktan put do gubitka zuba. Prikupljamo najpopularnija pitanja o zdravlju, ishrani, bolestima i dajemo odgovore na njih koji će vam omogućiti da bolje shvatite šta je dobro za zdravlje.
Pozdrav svim čitaocima ovog članka i pretplatnicima mog bloga! Želim da posvetim današnju publikaciju temi bez znanja o kojoj vaši internetski resursi neće biti čitljivi i privlačni: "Kako postaviti font u html-u." Sama tema je laka i siguran sam da ćete je brzo naviknuti.
Međutim, ne treba zaboraviti da su web jezici bogati svim vrstama alata za dizajn fontova, koje bi idealno trebali znati. Nakon čitanja članka, samouvjereno ćete savladati oblikovanje teksta, naučiti kako postaviti različite stilove, vrste stilova i ukrasa fontova, kao i promijeniti veličinu i boju rečenica i pojedinačnih slova. Hajde da počnemo!
Fontovi su različiti
Većina znakova, štampe i literature, web stranica i drugih usluga koristi standardne fontove. Iako su udobne, odavno im je dosadno i ne upadaju u oči. Zbog toga mnogi dizajneri malo mijenjaju izgled dizajna ili čak stvaraju nove stilove. Najpoznatiji i najuticajniji fontovi su:
- Helvetica;
- Futura;
- Garamond;
- Bodoni;
- Bembo;
- Rockwell;
- Times New Roman.
Njihove glavne razlike su u odnosu na određene porodice. Postoje porodice sa serifima, serifima, ukrasima, kurzivom i monoprostorima.
Također želim da naglasim da postoji 5 jedinica veličine fonta.
Počnimo s html jezikom i njegovom "kreativnošću"
Ime prvo header
P podnaslov sa crvenim slovom!
Ovdje se nalazi prvo stav struja primjer. Radi jasnoće ove riječi biće napisano kurzivom.
Podsjetimo da je atribut poravnati="centar" postavlja tekst koji će biti prikazan u sredini.
A sada je vrijeme za css da pokažete svoje vještine
Uprkos čitavom skupu raznih oznaka koje pruža html, css je praktičniji i fleksibilniji alat za stiliziranje izgleda fontova.
Glavna svojstva koja se koriste za formatiranje sadržaja su font i njegove komponente: tekst-dekoracija.
Prvo, hajde da analiziramo font. Ovo je univerzalni parametar, zahvaljujući kojem se može postaviti nekoliko vrijednosti istovremeno. Osim toga, svaki parametar radi sa svojim vlastitim ključnim riječima.
| Naziv nekretnine | Ključne riječi |
| font-family | Može se instalirati kao standardne porodice fontova: bez serifa (sans-serif); starinski (serif); dekorativni (fantazija); Kurziv (kurziv); monospace (monospace), Kao i standardni postojeći stilovi (Arial, Calibri, itd.). |
| veličina slova | Za postavljanje apsolutne dimenzije simbola koriste se sljedeće oznake: xx-mali, x-mali, mali, srednji, veliki, x-veliki, xx-veliki. Također možete postaviti jedinstvenu vrijednost. |
| font-weight | Odgovoran za zasićenost stila teksta. Varira unutar raspona ili specificira korištenjem riječi normalno, podebljano, svjetlije ili podebljano. |
| font-varijanta | Određuje reprezentaciju slova pomoću ključnih riječi: mala slova, normalno ili naslijediti. |
| font-style | Postavlja uobičajeni (normalni), kosi (kosi), kurziv (kurziv) stil ili nasljeđuje roditelj (nasljeđuje). |
| font-stretch | Određuje gustinu slova. Možete 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. |
Nekretnina tekst-dekoracija pomaže u ukrašavanju teksta dodatnim elementima kao što su podvlačenje ( podvući), precrtano ( linija kroz), precrtaj ( overline), kao i naslijediti roditeljske parametre ( nasljediti) ili otkažite sva odobrenja ( nijedan).
A sada je vrijeme za drugi primjer. Uzeo sam prethodni kod i stilizirao ga sa css-om. Dakle, naslov je stiliziran sjenom (koristeći svojstvo tekst-senka) i sa konturom oko ( granica-boja). U isto vrijeme, povećao sam jednu riječ. Također sam htio koristiti parametar neprozirnost da podesite transparentnost titla.
Ime prvo header
Translucent subtitle!
Ovdje se nalazi prvo stav struja primjer. Radi jasnoće ove riječi biće napisano kurzivom.
Omogućava vam da istaknete tekst kurzivom, kurzivom ili obrnuto kako biste tekstu dali standardni izgled. Ovo svojstvo ima samo tri vrijednosti:
- normalan - standardni tekst koji ima normalan stil, tj. nije kurziv i nije kurziv
- kurziv - kurziv stil
- oblique - kosi stil
Paragraf sa vrednošću normalnog.
Paragraf sa vrijednošću kurzivom.
Paragraf sa vrijednošću koso.
Pokušajte »Kurzivna slova su tradicionalno bila stilizovane verzije slova zasnovane na kaligrafiji, dok su kurzivna slova kreirana jednostavnim dodavanjem blagog nagiba znakovima. Većina fontova ne sadrži skup kurzivnih znakova, tako da pretraživač često koristi nagnuti algoritam za tekstualne znakove. To znači da u mnogim slučajevima nećete vidjeti razliku između kurzivnog i kosog.
Veličina slova
Promjena veličine fonta elementa je dobar način da ga vizualno istaknete i date mu vrijednost, ili obrnuto da pokažete da ove informacije ne bi trebale privlačiti pažnju na sebe.
Svojstvo font-size se koristi za promjenu veličine fonta. Postoji nekoliko načina za određivanje veličine fonta, razmotrite najčešći od njih:
Pikseli
Često se koriste vrijednosti piksela jer ovaj pristup pruža vrlo finu kontrolu nad veličinom. Numerička vrijednost završava se literalnim znakovima px, koji moraju odmah iza broja (ne smije biti razmaka između broja i px).
Tijelo (veličina fonta: 14px; )
Interes
Zadana veličina fonta u pretraživačima je 16px. Dakle, 100% je 16px, a 200% je 32px. Ako definirate pravilo koje postavlja sav tekst unutar elementa
vrijednost od 75% zadane veličine (koja bi bila 12px), a zatim definirajte drugo pravilo koje postavlja vrijednost od 75% za njegov podređeni element, tada će veličina fonta elementa biti 9px (tj. 75% od 12px).Telo (veličina fonta: 100%; )
EM
Jedinica em vam omogućava da promijenite veličinu fonta u odnosu na veličinu fonta roditeljskog elementa. Budući da je zadana veličina fonta u pretraživačima 16px, možete koristiti pravila slična onima koja se koriste za procentualne vrijednosti.
Body (font-size: 14px; ) h2 (font-size: 1.2em; )
U primjeru postavljamo element
veličina fonta 14px i za sve elemente- 1.2em. To znači da će veličina fonta naslova drugog nivoa biti skalirana za faktor 1,2. U našem slučaju, veličina svih zaglavlja bit će 1,2 puta veća od veličine fonta elementa , što znači 1,2 puta veću veličinu od 14px, što je otprilike jednako 17px. (Zapravo, veličina bi bila 16,8, ali većina pretraživača će je zaokružiti na 17.)
Napomena: U osnovi, procenti i ems su dva različita načina za postizanje istog cilja. Obje vam omogućavaju da postavite veličinu u odnosu na veličinu fonta roditeljskog elementa.
Ključne riječi
CSS nudi sedam ključnih reči koje vam omogućavaju da dodelite veličinu fonta u odnosu na podrazumevanu veličinu (16px): xx-small, x-small, small, medium, large, x-large i xx-large.
P (veličina fonta: mala; )
Srednja je zadana veličina fonta u pretraživačima. Ostale vrijednosti smanjuju ili povećavaju veličinu fonta s različitim koeficijentima. Najmanja veličina xx-small fonta je oko 9 piksela, svaka naredna veličina je oko 20% veća od prethodne:
Promjena veličine s procentima.
Promjena veličine pomoću piksela.
Promjena veličine pomoću ključne riječi x-small.
Svi smo koristili dobro poznati uređivač teksta Word. A znamo da je vrlo lako promijeniti font, veličinu i boju teksta u njemu. Dakle, i u html-u, bez većih poteškoća, možete podesiti ove parametre. Za ovo postoji oznaka. . Uparen je i stoga ima završnu oznaku, jer pretraživač treba da shvati gdje je početak i kraj teksta kojem mijenjamo parametre. Tag ima tri atributa: lice, veličinu i boju, koji postavljaju font, veličinu i boju teksta. U ovom vodiču ćemo detaljnije pogledati fontove.
To promijeniti font teksta u html-u– fajl, tekst moramo priložiti u tagove I i obavezno se prijavi atribut lica. izgleda ovako:
naš tekst
Nazive fontova možete vidjeti u Word editoru. Postoji prilično duga lista. Uzmimo primjer kako promijeniti font teksta u html-u i napisati sljedeći kod:
Ovaj tekst će biti napisan u zadanom fontu
Ovaj tekst će biti napisan fontom Batang
Ovaj tekst će biti napisan fontom Comics Sans MS
Sačuvajmo fajl pod bilo kojim imenom i vidimo šta će se desiti:
Kao što vidimo, sve je funkcionisalo: prvi pasus je u podrazumevanom fontu, u drugom paragrafu smo postavili font Batang, a u trećem pasusu tekst je prikazan u fontu Comic Sans MS. U principu, sve je lako i razumljivo, ali postoji jedna primjedba. Pošto dati font nije sačuvan u HTML datoteci, nema garancije da će biti prikazan kako bi trebao biti u pretraživaču. Ne možemo biti 100% sigurni da računar posjetitelja ima font koji smo postavili, pogotovo ako ovaj font nije standardan. Stoga je u atributu face bolje naznačiti oko tri naziva fonta, koji su navedeni odvojeni zarezima, tako da se barem jedan od njih sigurno prikazuje. Pogledajmo primjer:
Ovaj tekst bi se trebao pojaviti u Batangu ili Comic Sans MS, ili definitivno Arial
Pogledajmo rezultat:
Tekst se prikazuje u fontu Batang, koji smo prvo naveli u atributu lica. Ako ovaj font ne radi u pretraživaču posjetitelja, tada će raditi drugi font - Comic Sans MS, a ako ovaj font ne radi, onda će tekst sigurno biti prikazan u fontu Arial.
Druge opcije fonta
A za užinu, pogledajmo druge opcije fonta. U prvoj lekciji smo već razmotrili oznake koje postavljaju podebljani i kurziv font, to su oznake I respektivno. Pogledajmo još nekoliko oznaka koje stiliziraju font:
Podvuci tekstprecrtati ovaj dio
i postavite nadskript na riječ top
Da vidimo rezultat:
Postavili smo font na Comic Sans MS za sav tekst, prvi red je podvučen pomoću oznake , zapamtite iz prve lekcije da je oznaka
pravi prijelom reda, drugi red je precrtan zahvaljujući oznaci a u posljednjem redu stavili smo riječ "vrh". Ništa komplikovano! S ostatkom oznaka možete sami eksperimentirati. Ako vam je sve jasno, možete prijeći na sljedeću lekciju, u kojoj ćemo pogledati kako podesiti veličinu teksta, ali ako još imate pitanja, pogledajte detaljan video ove lekcije.
