Etichetă de mărire a fontului. Cum să faci un font frumos în html: dimensiuni, culori, etichete de font html

Mărimea fontului de pe site poate fi setată folosind atât HTML, cât și CSS. Să luăm în considerare ambele opțiuni.

Setarea dimensiunii fontului folosind HTML

Mărimea fontului de pe pagină poate fi determinată folosind eticheta font HTML. În articol ne-am uitat deja la etichetă fontși atributele sale. Unul dintre atributele acestei etichete este mărimea, care vă permite să setați dimensiunea fontului. Se aplică după cum urmează:

Creator de site-uri web "Nubex"

mărimea poate lua valori de la 1 la 7 (valoarea implicită este 3, ceea ce corespunde la 13,5 puncte pentru fontul Times New Roman). O altă opțiune pentru specificarea atributului este „+1” sau „-1”. Aceasta înseamnă că dimensiunea va fi modificată față de bază cu 1 punct mai mult sau, respectiv, mai puțin.

Această metodă este destul de ușor de utilizat și este indispensabilă dacă trebuie să modificați dimensiunea fontului unei bucăți mici de text. În caz contrar, este recomandat să stilați textul folosind CSS.

Setarea dimensiunii fontului folosind CSS

În CSS, puteți modifica dimensiunea fontului folosind proprietatea marimea fontului, care se aplică după cum urmează:

Schimbarea dimensiunii fontului folosind CSS

Fonturile div HTML din clasa nubex sunt setate la 14px folosind proprietatea dimensiune font.

În exemplul de mai jos, dimensiunea fontului este setată în pixeli. Dar există și alte moduri de a seta dimensiunea:

mare, mic, mediu- setați dimensiunea absolută (mică, medie, mare). Pot fi utilizate și valorile extra-mic (x-small, xx-small), extra-mari (x-mari, xx-mari).
mai mare, mai mic- setați dimensiunea relativă (mai mică sau mai mare în raport cu elementul părinte).
100% - se stabilește dimensiunea relativă (ca procent față de părinte). De exemplu: h1 ( font-size: 180%; ) Aceasta înseamnă dimensiunea etichetei H1 va fi 180% din dimensiunea fontului de bază.
Alte opțiuni pentru setarea dimensiunii relative:
- 5ex- înseamnă că dimensiunea va fi de 5 înălțimi de litere X din fontul de bază;
- 14pt- 14 puncte;
- 22px- 22 pixeli;
- 1vw- 1% din lățimea ferestrei browserului;
- 1vh- 1% din înălțimea ferestrei browserului;

Pentru a schimba fontul utilizați o etichetă cu atributul FACE. Puteți specifica fontul după nume (Arial, Tahoma, Verdana) sau tip (de exemplu, monospace). Este recomandabil să enumerați mai multe nume de fonturi pentru a evita situația în care se dovedește că utilizatorul nu are instalat fontul necesar. Recomand să folosiți cel puțin unul dintre fonturile general acceptate (de exemplu Arial). Nu recomand să folosiți mai mult de 2-3 fonturi diferite pe o pagină, altfel pagina va arăta neîndemânatică și neprofesională.

Exemplu:

Modificarea dimensiunii fontului unei pagini html

Pentru a modifica dimensiunea fontului, utilizați atributul SIZE. Cu cât fontul este mai mare, cu atât textul devine mai ușor de citit. Cu toate acestea, fontul mic vă permite să încadrați mai multe informații în ecran. Folosind acest atribut cu o etichetă , puteți modifica dimensiunea textului întregii pagini web. Folosind atributul SIZE împreună cu o etichetă , puteți influența aspectul unei singure bucăți de text. 7 dimensiuni de font disponibile. Cel mai mic este desemnat cu numărul 1, iar cel mai mare cu 7.

Puteți schimba fontul folosind etichete Și . mărește fontul fragmentului specificat în raport cu textul anterior și , în consecință, reduce.

Schimbând dimensiunea literelor individuale, puteți obține efecte interesante. De exemplu, în acest fel puteți obține un drop cap - o literă mare mare la începutul unui paragraf.

Exemplu:

Selectarea culorii fontului unei pagini html

Afișarea unor porțiuni din textul unei pagini Web în fonturi diferite colorate îl face atractiv.

Utilizarea atributului TEXT în contextul unei etichete , puteți schimba întreaga culoare a textului unei pagini web. Aplicarea atributului COLOR cu o etichetă (are o prioritate mai mare) vă permite să interacționați cu aspectul unei singure bucăți de text.

Pentru a schimba culoarea textului, trebuie să cunoașteți numele culorii sau codul hexazecimal al acesteia. Codul este format din simbolul lire sterline # și un număr care reprezintă intensitatea componentelor roșii, verzi și albastre ale culorii. Numai 16 culori standard pot fi menționate prin nume.

Denumirea culorilor Cod aqua ##00FFFF negru ##000000 albastru ##0000FF fuchsia ##FF00FF gri ##808080 verde ##008000 lime ##00FF00 maroon ##800000 bleumarin ##000080 olive ##808080008 ##808008008 #FF0000 argintiu ##C0C0C0 teal ##008080 alb ##FFFFFF galben ##FFFF00

Unele site-uri atrag utilizatorii nu prin animație, nu prin imagini sau fotografii, nu prin videoclipuri, ci doar cu conținutul lor text. Textul este o parte integrantă a conținutului multor site-uri populare. În lecțiile anterioare, ne-am uitat la proprietățile CSS care vă permit să schimbați culoarea textului, să îi adăugați o umbră, să o aliniați și să adăugați o subliniere, supraliniere sau baraj. Această lecție va analiza ce familii de fonturi există și cum să schimbați fontul implicit al textului.

Diferența dintre familiile de fonturi Sans-serif și Serif

site web - font sans-serif

site - font serif

Familii de fonturi în CSS

În CSS, fonturile sunt împărțite în familii, fiecare familie constând dintr-un set de fonturi care au caracteristici comune. Există doar cinci familii de fonturi:

sans-serif - fonturi sans-serif, sunt considerate a fi mai ușor de citit pe ecranul computerului decât fonturile din familia serif.
serif este o familie de fonturi serif. Mulți oameni le asociază cu articole din ziare. Serifurile sunt linii decorative și liniuțe de-a lungul marginilor literelor.
monospace este o familie de fonturi ale căror caractere au aceeași lățime fixă. Astfel de fonturi sunt folosite în principal pentru a afișa exemple de coduri de program.
cursive - fonturi care imită textul scris de mână.
fantezie - fonturi artistice și decorative. Ele nu sunt foarte răspândite, nu sunt disponibile pe toate computerele și sunt rareori utilizate în design web.

Proprietatea font-family vă permite să schimbați fontul implicit. De obicei, conține o listă de fonturi interschimbabile, separate prin virgulă, aparținând aceleiași familii. Dacă numele fontului este format din mai mult de un cuvânt, atunci acesta trebuie indicat între ghilimele. Numele de familie este de obicei indicat la sfârșitul listei:

Corp (familie de font: Verdana, Helvetica, Arial, sans-serif; )

Să ne uităm la modul în care browserul procesează lista de fonturi specificate în proprietatea noastră font-family:

Mai întâi verifică dacă fontul Verdana este instalat pe computer și, dacă da, îl folosește ca font pentru textul din interiorul elementului (în cazul nostru, în interiorul elementului )
Dacă Verdana nu este instalat, caută fontul Helvetica. Dacă căutarea are succes, folosește-o în interior .
Dacă Helvetica nu este instalată, caută fontul Arial. Dacă este pe computer, îl aplică intern .
În cele din urmă, dacă niciunul dintre fonturile specificate nu este găsit, se folosește primul font din familia sans-serif găsit de browser pe computer. În acest fel, browserul poate determina independent fontul potrivit din familie.

Numele documentului

Proprietatea CSS familie de fonturi

Paragraf folosind fontul Times New Roman.

Paragraf folosind fontul Arial.

Încerca "

Notă: Atunci când alegeți un singur font specific, este important să înțelegeți că browserul îl va afișa doar dacă fontul este instalat pe computerul utilizatorului. Dacă fontul nu este găsit, textul va fi afișat în fontul „Times New Roman”, care este implicit în toate browserele.

Salutări tuturor cititorilor acestui articol și abonaților blogului meu! Vreau să dedic publicația de astăzi unui subiect fără cunoștință despre care resursele dvs. de internet nu vor fi lizibile și atractive: „Cum să setați un font în HTML”. Subiectul în sine este ușor și sunt sigur că îl vei stăpâni rapid.

Cu toate acestea, nu trebuie să uităm că limbile web sunt bogate în tot felul de instrumente de design de fonturi pe care, în mod ideal, trebuie să le cunoașteți. După ce ați citit articolul, veți stăpâni cu încredere formatarea textului, veți învăța cum să setați diferite stiluri, tipuri de stiluri de font și decorațiuni, precum și să schimbați dimensiunea și culoarea atât a propozițiilor, cât și a literelor individuale. Să începem!

Fonturile sunt diferite

Cea mai mare parte a semnelor, presa și literatura, site-urile web și alte servicii utilizează fonturi standard. Deși sunt confortabile, de mult au devenit plictisitoare și nu atrage privirea. De aceea, mulți designeri schimbă ușor tipul de design sau creează cu totul noi stiluri. Cele mai cunoscute și influente fonturi sunt:

Helvetica;
Futura;
Garamond;
Bodoni;
Bembo;
Rockwell;
Times New Roman.

Principalele lor diferențe constă în relația lor cu anumite familii. Există familii serif (serif), sans serif, decorative, cursive și monospace.

De asemenea, vreau să subliniez că există 5 dimensiuni de font.

Să începem cu limbajul html și „abilitățile sale creative”

Formatarea textului folosind etichete html

Nume primul antet

P subtitrare cu litera rosie!

Aici se află primul paragraf actual exemplu. Pentru claritate aceste cuvinte va fi scris cu caractere cursive.

Permiteți-mi să vă reamintesc că atributul aliniază = "centru" setează textul să fie afișat în centru.

Și acum a sosit momentul ca css să-și arate abilitățile

În ciuda întregului set de etichete diferite oferite de html, css este un instrument mai convenabil și mai flexibil pentru proiectarea aspectului fonturilor.

Principalele proprietăți utilizate pentru formatarea conținutului sunt: fontși componentele sale: text-decor.

Să ne uităm mai întâi la asta font. Acesta este un parametru universal, datorită căruia puteți seta mai multe valori în același timp. În plus, fiecare parametru operează cu propriile cuvinte cheie.

Numele proprietatii	Cuvinte cheie
familie de fonturi	Poate fi instalat ca familii de fonturi standard: · fără serif (sans-serif); · antic (serif); · decorativ (fantezie); · cursiv (cursiv); monospațiu (monospațiu), La fel sunt și stilurile standard existente (Arial, Calibri etc.).
marimea fontului	Pentru a seta dimensiunea absolută a simbolurilor, se folosesc următoarele notații: xx-small, x-small, small, medium, large, x-large, xx-large. De asemenea, puteți specifica o valoare unică.
grosimea fontului	Responsabil pentru saturarea stilului textului. Se modifică în interval sau este specificat folosind cuvintele normal, bold, lighter sau bolder.
varianta de font	Specifică reprezentarea literelor folosind cuvintele cheie majuscule, normal sau moștenire.
stilul fontului	Setează normal, oblic, cursiv sau moștenește părintele.
font-întindere	Indică densitatea literelor. Pot fi specificate următoarele valori: ultra-condensat, ultra-expandat, extra-condensat, extra-expandit, semi-condensat, semi-expandit, normal, expandat, condensat și moștenire.

Proprietate text-decor ajută la decorarea textului cu elemente suplimentare, cum ar fi sublinierea ( subliniază), barat ( line-through), supraliniază ( supraliniere), și, de asemenea, moștenește parametrii părintelui ( moşteni) sau anulați toată înregistrarea ( nici unul).

Acum este timpul pentru al doilea exemplu. Am luat codul anterior și l-am stilat folosind css. Deci, titlul a fost decorat cu o umbră (folosind proprietatea text-umbră) și cu un contur în jurul ( frontieră-culoare). În același timp, am făcut un cuvânt mai mare. Am vrut să folosesc și parametrul opacitate pentru a seta transparența subtitrarii.

Formatarea textului folosind proprietățile CSS

Nume primul antet

Subtitrare translucida!

Aici se află primul paragraf actual exemplu. Pentru claritate aceste cuvinte va fi scris cu caractere cursive.

De la autor: Bun venit pe paginile blogului Webformyself. În acest articol, aș dori să răspund la întrebarea cum să setați un font în html. Unii oameni încă procedează în mod greșit, așa că este important să analizăm problema mai amănunțit.

Cum a fost setat fontul înainte

Anterior, html folosea o etichetă specială de font pereche, care acționa ca un container pentru modificarea parametrilor fontului, cum ar fi fontul, culoarea și dimensiunea. Astăzi, această abordare este fundamental greșită. De ce? Standardele web specifică faptul că aspectul unei pagini nu trebuie specificat în markup html. În plus, eticheta este pe deplin acceptată doar într-o versiune foarte veche de HTML - HTML 3.

Setarea corectă a fontului în html

Astăzi, în acest scop, merită să folosiți exclusiv capabilități CSS. Acest limbaj a fost creat tocmai pentru a determina aspectul prin el. În plus, CSS are mult mai multe proprietăți care afectează aspectul textului. Să ne uităm puțin la fiecare dintre ele:

Stilul fontului. Definește stilul textului. Ia urmatoarele valori:

Varianta de font. Proprietatea specifică modul în care trebuie interpretată ortografia literelor mici. Are doar două semnificații:

Normal – comportament normal.

Litere mici - toate literele mici sunt convertite în litere mari, iar dimensiunea lor este ușor redusă în comparație cu fontul obișnuit.

Grosimea fontului. Determină îndrăzneala textului. Valoarea poate fi specificată folosind cuvinte cheie sau o valoare numerică. Să ne uităm la toate opțiunile:

Normal – text normal

Bold – text cu stil aldine

Mai îndrăzneț – va apărea mai îndrăzneț decât elementul părinte.

Mai ușoare – literele vor avea mai puțină îndrăzneală în comparație cu părintele lor.

Este atat de simplu. În plus, este posibil să setați valoarea sub formă de numere de la 100 la 900, unde 900 este cel mai îndrăzneț. De exemplu, valoarea normală corespunde cu 400, iar valoarea aldină corespunde cu 700.

Din păcate, majoritatea browserelor nu recunosc aceste valori numerice și pot folosi doar două valori: normal și bold. Pentru experiment, am creat 9 paragrafe și am dat fiecărui text o greutate diferită - de la 100 la 900. Apoi am deschis această pagină web în browsere diferite și niciunul nu a afișat stiluri diferite. Concluzie: este mai bine să nu folosiți valori numerice.

Marimea fontului. Această proprietate specifică dimensiunea literelor. Mărimea poate fi specificată în diferite valori relative și absolute. Cel mai adesea, dimensiunea este specificată în pixeli, unități em relative și procente. Dacă doriți să aflați mai multe despre setarea dimensiunii în CSS, citiți-l pe acesta, unde totul este descris mai detaliat.

Familie de fonturi. Poate cea mai de bază proprietate care determină familia sau numele specific al fontului folosit. Dacă utilizați un nume specific, trebuie să vă asigurați că fontul specificat poate fi găsit pe computerele tuturor utilizatorilor. Pentru fiabilitate, trebuie să specificați o opțiune alternativă sau o întreagă familie separată prin virgule. Fonturile sunt împărțite în următoarele familii:

Fiecare familie se potrivește nevoilor diferite. De exemplu, fantezia este adesea folosită pentru a proiecta diverse anteturi, iar monospace este folosit pentru a scoate codul mașinii etc. Puteți afla mai precis numele fonturilor, de exemplu, într-un editor de text sau în Photoshop.

Notare scurtă

Tot ceea ce am discutat mai sus poate fi scris foarte ușor într-o singură linie folosind minunata proprietate a fontului, care reunește toate setările. Trebuie să scrieți în următoarea ordine:

Font: font-style | font-variant | font-weight | dimensiunea fontului | familie de fonturi;

Font: font-style | font - varianta | font - greutate | dimensiunea fontului | familie de fonturi ;

Dacă nu trebuie să specificați un parametru, acesta este pur și simplu omis. Doar dimensiunea și familia de fonturi sunt necesare aici; orice altceva este opțional dacă nu este necesar. Utilizarea notației scurte vă permite să reduceți foarte mult codul în css. Folosește-l pentru că este o optimizare bună pentru site.

Cum să setați fontul în html la diferite elemente

Deci, dintr-un motiv oarecare, ne-am lăsat foarte duși de a descrie toate proprietățile fontului. Aceasta este o informație foarte importantă, dar cum o întrebați corect? Utilizați selectoarele potrivite pentru a ajunge la elementele potrivite. Mai jos ofer cateva exemple:

p a( font-family: Verdana, sans-serif; )

Pentru datele tabelare, sunt setați mulți parametri de font: majuscule reduse, stil aldine, dimensiunea fontului și numele.