Setați fontul textului. Atributul feței etichetei fontului

27.11.14 88.7K

În html, dimensiunea fontului joacă un rol important. Vă permite să atrageți atenția utilizatorului asupra informațiilor importante postate pe pagina site-ului. Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.

Etichete și atribute atunci când lucrați cu fonturi html

Limbajul hipertext are o gamă largă de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.

Motivul creării limbajului HTML a fost problema afișării regulilor de formatare a textului în browsere.

Să ne uităm la etichetele care sunt folosite pentru a lucra cu fonturile în HTML și la atributele acestora. Principala este eticheta . Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:

culoare – setează culoarea textului;
dimensiune – dimensiunea fontului în unități convenționale.

Sunt acceptate valorile atributelor pozitive de la 1 la 7.

față – folosit pentru a seta familia de fonturi de text care va fi folosită în interiorul etichetei . Sunt acceptate mai multe valori, separate prin virgule.

Doar textul care se află între părțile etichetei de font pereche este formatat. Restul textului este afișat în fontul standard standard.

De asemenea, în html există o serie de etichete pereche care specifică o singură regulă de formatare. Acestea includ:

— setează fontul aldine în html. Etichetă similar în acțiune cu cel precedent;

— dimensiunea este mai mare decât cea implicită;

— dimensiune mai mică a fontului;

— text italic (italic). Etichetă similară ;

— text cu subliniere;

~~- tăiat;~~

_{— afișarea textului numai cu litere mici;}

^{- cu litere mari.}

Text simplu

Text îngroșat

Text îngroșat

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

~~Barat~~

Capacitățile atributelor de stil

Pe lângă etichetele descrise, există mai multe moduri de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare a fontului:

1) font-family – proprietatea stabilește familia de fonturi. Este posibil să enumerați mai multe valori.
Schimbarea fontului în html la următoarea valoare va avea loc dacă familia anterioară nu este instalată pe sistemul de operare al utilizatorului.

Sintaxa de scriere:

familia-font: font-name [, font-name[, ...]]

2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML.
Sintaxa de scriere:

font-size: dimensiune absolută | dimensiune relativă | sens | interes | moşteni

De asemenea, puteți seta dimensiunea fontului:

În pixeli;

În termeni absoluti ( xx-mic, x-mic, mic, mediu, mare);

În procente;

În puncte (pt).

Dimensiunea fontului: 7

Dimensiunea fontului: 24px

Dimensiunea fontului: x-mari

Dimensiunea fontului: 200%

Dimensiunea fontului: 24 pt

3) font-style – setează stilul de scriere a fontului. Sintaxă:
stil font: normal | cursiv | oblic | moşteni

Valori:

normal – ortografie normală;

italic – italic;

oblic – font înclinat spre dreapta;

inherit – moștenește ortografia elementului părinte.

Un exemplu despre cum să schimbați fontul în html folosind această proprietate:

font-style:moștenire

stil font: cursiv

stil font: normal

stil font: oblic

4) font-variant – convertește toate majusculele în majuscule. Sintaxă:
font-variant: normal | cu majuscule mici | moşteni

Un exemplu despre cum să schimbați fontul în html cu această proprietate:

font-variant:moștenire

font-variant:normal

font-variant:small-caps

5) font-weight – vă permite să setați grosimea textului (saturație). Sintaxă:
greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Valori:

bold – setează fontul html la bold;

bolder – mai îndrăzneț față de normal;

mai ușoară – mai puțin saturată față de normal;

normal – ortografie normală;

100-900 – setează grosimea fontului în echivalent numeric.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

proprietatea fontului html și culoarea fontului

Fontul este o altă proprietate a containerului. În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor. sintaxa fontului:

font: font-size font-family | moşteni

Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:

legenda – pentru butoane;

pictogramă – pentru icoane;

meniu - meniu;

mesaj-box – pentru casete de dialog;

small-caption – pentru controale mici;

status-bar – font bara de stare.

font:pictogramă

font:legendă

font:meniu

font: caseta de mesaje

subtitrări mici

font:bara de stare

font: italic 50px bold „Times New Roman”, Times, serif

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 chiar 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 web design.

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, acesta trebuie specificat î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 disponibil 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.

Titlul documentului
Proprietatea CSS familie de fonturi

Paragraf folosind fontul Times New Roman.

Paragraf folosind fontul Arial.

Încercați »
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.

Cum se schimbă fontul?

Atunci când creați un site web, este întotdeauna necesar să schimbați fontul textului pentru o varietate de părți și elemente ale paginilor HTML, deoarece acest lucru nu numai că adaugă unicitate și stil site-ului, ci și îmbunătățește calitatea percepției informațiilor. În HTML există etichete speciale pentru asta, despre ele vom vorbi în această lecție, care va fi una dintre cele mai mari din acest tutorial. Dar, așa cum v-am spus mai devreme, nu încercați să memorați totul pe de rost, nu, principalul lucru este să vă dați seama și să înțelegeți ce se discută în fiecare etapă a lecției.

Schimbarea stilurilor de font

Există mai multe modalități de a schimba stilurile de scriere a fonturilor în HTML și veți vedea în curând acest lucru. Acum să ne uităm la câteva etichete noi:

...Şi ...- evidențiați textul îndrăzneţ font.

...Şi ...- evidențiați textul cursive.

^...- afișează textul în superscript, de exemplu E = mc 2 .

_...- afișează text în indice, de exemplu H2SO4.

Toate aceste etichete sunt încorporat (inline, la nivel de linie), adică nu creează întreruperi de linie înainte și după ei înșiși, ci sunt situate pe o singură linie. De asemenea, pot conține doar elemente încorporate, astfel încât acestea pot fi imbricate liber unul în celălalt. Cel mai important lucru este să nu uiți de cuibărirea corectă: o etichetă care este deschisă mai devreme trebuie închisă mai târziu.

Cred că ați observat că există două etichete fiecare pentru bold și italic. Cert este că browserele obișnuite afișează conținutul acestor etichete în același mod, dar browserele non-vizuale (voce) pot accentua în special textul din interior. Şi . Prin urmare, dacă doriți să evidențiați anumite cuvinte sau expresii pentru a atrage cititorul, atunci este mai bine să utilizați aceste etichete, deși, în general, nu există nicio diferență.

Puteți întreba: „Dar etichetele de mai sus sunt într-adevăr tot ceea ce poate fi folosit pentru a evidenția textul în HTML?” Bineînțeles că nu! Există și etichete Şi , subliniind textul, precum și eticheta , afișând text barat. Dar, vedeți, aceste etichete sunt învechite în HTML și, ca și atributul align, este posibil ca browserele să nu le mai înțeleagă în curând. Prin urmare, vă voi arăta o altă metodă pe care o puteți folosi fără teamă. Și constă în folosirea atributului de stil, și este permis să îl specificați în interiorul oricăror etichete. Sintaxa generală este următoarea:

<тег stil= "decor text:subliniat" >... - subliniază textul.

<тег stil= "decor text:overline" >... - subliniază textul.

<тег stil= „text-decoration:line-through”>... - taie textul.

Exemplu de schimbare a stilurilor de font
Schimbarea stilurilor de font
Tipare aldine. Cursive.

Cursiv aldine.

H ₂ AŞA ₄- formula acidului sulfuric scrisă cu caractere cursive.

Paragraf subliniat din text.

Text simplu, tăiat îndrăzneț.

Rezultat în browser

Acum aș dori să fac o clarificare despre atributul stilului. Stilul este un atribut de etichetă complet obișnuit, dar se referă la Cascading Style Sheets (CSS). În trecutul îndepărtat, toate funcțiile de structurare a unei pagini HTML în ansamblu și de prezentare externă a fiecărui element separat (culoare, formă, poziție pe pagină etc.) au fost preluate de limbajul HTML. Dar apoi dezvoltatorii de limbaj au decis să separe aceste funcții și au creat CSS. În consecință, multe etichete sau atribute de etichetă au devenit învechite. Prin urmare, pentru a nu vă umple capul cu informații inutile, în acest tutorial le-am înlocuit și cu stiluri, adică atributul style. Sintaxa sa generală este următoarea:

<тег stil= „Proprietate CSS: valoare”>...

Folosind stilul nu vei pierde absolut nimic, dar vei invata sa scrii HTML competent, iar ca bonus, vei stapani si putin CSS.

Etichetă sau ce să faci când nu există etichete necesare

Ei bine, totul este clar până acum? Bine, atunci o întrebare. Ce veți face dacă, de exemplu, trebuie să tăiați nu întregul paragraf, ci doar jumătate din text și să nu îl puneți îngroșat sau italic? Ei bine, nu vă faceți griji, o etichetă foarte convenabilă și necesară vă va ajuta aici.

Deci, faceți cunoștință cu -... . Această etichetă este, de asemenea încorporat (inline, la nivel de linie)și poate conține orice etichete încorporate, dar acesta nu este principalul lucru. Pe cont propriu , fără atribute, nu adaugă nicio modificare nici textului, nici etichetelor din interiorul acestuia. Și a fost creat special pentru stiluri, adică, în esență, pentru atributul stil. Datorită acestui atribut, sau mai degrabă a semnificațiilor sale diferite, asta apar anumite proprietăți. Gata, acum să studiem un exemplu.

Exemplu de utilizare a etichetei SPAN
Folosind eticheta SPAN
Text simplu, fără modificări.

Text mai obișnuit. Stresat. Barat.

Rezultat în browser

Text simplu, fără modificări.

Text mai obișnuit. Stresat.

Barat.

Schimbarea numelui (tipului) fontului

Nu știi ce este numele unui font? Cu siguranță mulți dintre voi au tastat cel puțin o dată text în Microsoft Word sau OpenOffice Writer și au văzut acest meniu:

Acestea sunt numele fonturilor care sunt disponibile pe computer și sunt folosite nu numai de Word sau Writer, ci și de multe alte aplicații, inclusiv browsere. Numele (fontul) unui font determină designul acestuia în sine, care distinge un font de altul.

Nu recomand cu tărie să utilizați fonturi exotice, deoarece este posibil să nu fie pe computerul persoanei care vă vizitează site-ul, iar apoi, în loc de litere, va vedea diferite simboluri sau pătrate de neînțeles. Iată o listă cu cele mai comune fonturi pe care aproape fiecare utilizator le are pe computer: În mod implicit, aproape toate browserele folosesc fontul „Times New Roman”, iar pentru a-l schimba, se folosește același atribut de stil, care poate fi aplicatîn interiorul oricărei etichete

<тег stil= . Sintaxa generală pentru specificare este:>...

„font-family:nume font, familie”

Dacă numele fontului constă din mai multe cuvinte, atunci acesta trebuie inclus între ghilimele simple. Este permis să specificați nu unul, ci mai multe nume de fonturi separate prin virgule, iar apoi, dacă primul font nu este pe computer, va fi folosit al doilea, al treilea etc. Dar la final, asigurați-vă că puneți numele întregii familii de fonturi, în acest caz, dacă browserul nu detectează un singur font, va folosi fontul care este cel mai potrivit pentru această familie. Pentru a schimba fontul pe întreaga pagină, trebuie doar să specificați atributul de stil în etichetă . Și dacă trebuie să schimbați fontul pentru o parte separată a textului, atunci includeți-l într-o etichetă

și aplicați-i atributul.
Exemplu de schimbare a numelor fonturilor
Schimbarea numelor fonturilor

Acesta este un font Arial, dacă nu este acolo, atunci Verdana, iar dacă nu este acolo, atunci orice alt sans-serif.

Acesta este Comic Sans MS sau orice cursive. Acesta este din nou Arial, Verdana sau orice sans-serif.

Rezultat în browser

Și acesta este Courier sau orice monospace. Ei bine, ți-ai dat seama de exemplu? Voi face o explicație, a cărei înțelegere îți va face viața mult mai ușoară în viitor, deși cred că mulți au ghicit deja. Deci, dacă etichetele sunt imbricate unele în altele și mai multe dintre ele efectuați modificări de același tip

(de exemplu, schimbă numele fontului), apoi etichetele descendente înlocuiesc proprietățile etichetelor strămoși. Dacă etichetele imbricate efectuează modificări diferite, atunci se completează reciproc, asta-i tot.

Limbajul HTML este limitat la doar șapte dimensiuni de font, ceea ce, vedeți, este foarte mic pentru un site web bun. De aceea, toată lumea folosește CSS pentru redimensionare de mult timp, iar acum îl vei învăța și tu.

Există aproximativ zece unități de măsură în CSS, dar ne vom uita doar la cele trei cele mai populare - puncte (pt), pixeli (px) și procente (%). Aşa:

pct- Puncte. Un punct este egal cu 1/72 de inch, iar un inch este de 2,54 cm. Prin urmare, 1pt = 0,03527778cm. Aceasta este o valoare absolută, deoarece dimensiunea specificată în puncte nu depinde de nimic.

px- Pixeli. Măsurat în pixeli monitorului computerului. Un pixel este cel mai mic punct de pe monitor și este o valoare relativă, deoarece dimensiunea acestuia depinde de rezoluția curentă a ecranului și de dimensiunea monitorului însuși.

% - Interes. Se calculează ca procent, unde 100% este luat ca valoare a etichetei părinte, iar dacă nu este specificată, atunci valoarea implicită în browser. Aceasta este, de asemenea, o valoare relativă, deoarece dimensiunea fontului părinte poate fi complet diferită, iar utilizatorii pot schimba liber dimensiunea fontului în browser.

Pentru a specifica dimensiunea fontului, se folosește și poate fi specificat atributul stil În mod implicit, aproape toate browserele folosesc fontul „Times New Roman”, iar pentru a-l schimba, se folosește același atribut de stil, care poate fi aplicat. Sintaxa generală este:

<тег style="font-size:size">...

Ca și în cazul numelor fonturilor, pentru a modifica dimensiunea fontului pe întreaga pagină, trebuie doar să specificați atributul de stil în etichetă . Și dacă trebuie să schimbați fontul pentru o bucată de text, atunci includeți-l într-o etichetă . Și dacă trebuie să schimbați fontul pentru o parte separată a textului, atunci includeți-l într-o etichetă

Exemplu de modificare a dimensiunilor fontului
Modificarea dimensiunii fontului
Această dimensiune a fontului este de 90% din dimensiunea implicită a browserului.

Această dimensiune este de 90% din dimensiunea etichetei BODY.

Dimensiunea fontului titlului este de 120% din dimensiunea BODY.

Aceasta este din nou 90% din dimensiunea implicită din browser. Această dimensiune a fontului este de 15 puncte.

Rezultat în browser

Această dimensiune a fontului este de 90% din dimensiunea implicită a browserului.

Această dimensiune este de 90% din mărimea CORPULUI.

Dimensiunea fontului titlului este de 120% din dimensiunea BODY.

Aceasta este din nou 90% din dimensiunea implicită din browser. Această dimensiune a fontului este de 15 puncte.

Mărimea unui font depinde nu numai de indicația sa explicită, ci și de numele acestuia (font) - diferite fonturi pot avea înălțimi și lățimi complet diferite ale literelor, precum și spațierea dintre litere.

Mai multe despre atributul stilului

Este timpul să vă spun un alt secret al acestui atribut minunat, dar din nou vă voi pune o întrebare mai întâi. Ce ați face dacă ar trebui să setați un paragraf întreg la un nume de font Arial cu o dimensiune de 80%? Și îți spun, ai scrie așa ceva:

Textul paragrafului.

Textul paragrafului.

Sau chiar așa.

Textul paragrafului.

am dreptate? Ei bine, dacă primele două opțiuni sunt corecte în principiu, atunci ultima este în general o eroare, deoarece, dacă vă amintiți, o etichetă nu poate avea două atribute identice. Acum este timpul să ne amintim că stilul nu este doar un atribut, ci un atribut CSS. Uită-te la asta:

Textul paragrafului.

Mult mai ușor, nu? Cel mai important este să nu uitați să puneți un punct și virgulă (;) între stilurile adiacente și să puneți toate aceste lucruri între ghilimele duble (" "), altfel se va aplica doar primul stil, iar browserul va ignora restul. Ei bine, punem întotdeauna ghilimele duble, nu?

Deci, această lecție s-a dovedit a fi foarte intensă, așa că fă-ți temele și odihnește-te puțin.

Teme pentru acasă.

Creați un titlu pentru articol și cele două secțiuni ale acestuia, dar subliniați și titlurile secțiunilor.

Asigurați-vă că, atunci când treceți mouse-ul peste titlul unui articol, apare o legendă corespunzătoare.

Scrieți un paragraf la începutul articolului și două în fiecare secțiune.

Setați întreaga pagină la fontul Arial la 90% din dimensiunea implicită a browserului.

Setați toate titlurile la fontul Times și setați titlul articolului la 150% dimensiunea fontului și subtitlurile la 120%.

În primul paragraf, evidențiați două cuvinte cu caractere aldine și unul cu caractere cursive. În al doilea - o frază de mai multe cuvinte cu caractere cursive aldine. În al treilea, subliniați fraza cu caractere cursive. În a patra, tăiați jumătate din frază cu caractere aldine.

Scrieți formula alcoolului în ultimul paragraf: C 2 H 5 OH.

Aspectul site-ului de înaltă calitate are scopul principal de a face informațiile de pe pagină cât mai lizibile și mai convenabile pentru utilizator. Și lucrul cu text folosind html este abilitate principală și de bază pe care trebuie să o ai atunci când lucrezi cu site-uri web. Acest articol detaliază cum să modificați dimensiunea textului utilizând limbajul de marcare web.

Formatați textul folosind HTML - este foarte ușor

Oricine a întâmpinat măcar o dată nevoia de a crea sau edita site-uri web, primul lucru pe care l-a întrebat a fost cum să formateze textul astfel încât să îndeplinească cerințele dorite. Există multe modalități de a realiza această sarcină, iar cea mai simplă modalitate este de a o face direct în cadrul site-ului însuși folosind limbajul de marcare. Odată ce vă dați seama cum să schimbați dimensiunea fontului în HTML, nu va prezenta dificultăți în viitor.

În acest material vom vorbi în detaliu despre modul în care fonturile sunt formatate în documentele HTML.

Principii generale pentru editarea textului pe pagini web

În primul rând, trebuie să înțelegem ce posibilități ne oferă html pentru formatarea textului. Există trei caracteristici principale ale unui font: font (o caracteristică care determină aspectul literelor și caracterelor), culoarea și dimensiunea. Lizibilitatea oricărui document depinde de cât de bine sunt combinate aceste caracteristici.

Caracteristicile textului din marcajul HTML sunt modificate folosind etichete și atribute. O etichetă este componenta principală a limbajului, unitatea sa logică principală, iar atributul este utilizat pentru a seta o valoare specifică pentru fiecare element de pagină marcat cu eticheta.

De asemenea, este necesar să rețineți că afișarea textului poate varia atunci când utilizați browsere diferite, așa că înainte de a finaliza munca pe site, trebuie să vă asigurați că informațiile sunt afișate corect în toate browserele majore utilizate. De exemplu, dimensiunea fontului în html atunci când utilizați versiuni mai vechi de Internet Explorer poate diferi în comparație cu versiunile noi.

Etichetă

Principalele etichete care sunt folosite la formatarea textului pe o pagină web sunt Şi .

Etichetă asociată este responsabil pentru toate caracteristicile textului formatat, care sunt specificate folosind atributele corespunzătoare. Această etichetă este cea mai ușor de înțeles și mai convenabil de utilizat atunci când așezați pagini.

Deoarece ne interesează în primul rând cum să schimbăm dimensiunea fontului în html, va trebui să folosim atributul size.

Arata cam asa:

Textul merge aici

Valoarea mărimii fontului html este specificată în unități numerice de la 1 (cel mai mic) la 7 (cel mai mare). Valoarea medie este considerată în mod tradițional 3 (corespunzând mărimii 13,5 în tipul de caractere Times New Roman).

În consecință, dacă adăugați următorul cod în corpul documentului, atunci când deschideți pagina în browser, veți vedea cum se modifică dimensiunea textului în funcție de valoarea setată.

Dimensiunea fontului 1

Dimensiunea fontului 2

Dimensiunea fontului 3

Dimensiunea fontului 4

Dimensiunea fontului 5

Dimensiunea fontului 6

Dimensiunea fontului 7

Pe lângă valorile numerice absolute, pot fi folosite și cele relative. Această etichetă este folosită și pentru aceasta. Dimensiunea fontului html, așa cum s-a menționat mai sus, este setată implicit la 3, așa că pe baza acesteia, puteți adăuga sau scădea valori numerice întregi pentru a obține rezultatul dorit. Cam asa arata:

Textul merge aici

Cu această valoare, dimensiunea fontului va fi setată la 6. Puteți testa cum funcționează acest lucru în browser și puteți experimenta diferite combinații de valori numerice.

Folosind o etichetă Puteți modifica dimensiunea și culoarea fontului în html. Pentru a schimba culoarea, utilizați atributul de culoare și codul de culoare hexazecimal.

Pentru a face modificările necesare, atributele se succed în ordine în corpul unei etichete , nu este nevoie să le separați cu semne de punctuație.

Etichetă

Această etichetă are o gamă mai largă de capabilități și caracteristici decât . De obicei, este folosit împreună cu CSS pentru a edita și a stila anumite părți ale unui document.

Pentru această etichetă, valorile sunt setate folosind atributul stil. Iată cum arată în cod:

Textul merge aici

După cum puteți vedea, aici este folosit codul CSS (dimensiunea fontului), iar dimensiunea este setată folosind puncte (pt, point). Valoarea standard este 12pt, care poate fi modificată prin creșterea sau descreșterea cu un număr întreg.

Modificarea dimensiunii fontului la formatarea titlurilor

Adesea trebuie să reduceți sau să măriți dimensiunea fontului în html atunci când editați titlurile. În acest caz, sarcina nu este doar de a schimba dimensiunea, ci și de a selecta în mod logic o anumită parte a textului și de a o atribui ca titlu pentru blocul de text.

În acest caz, este recomandabil să folosiți etichete
—
. Etichetă
- Acesta este primul nivel. Acesta va fi afișat cel mai mare în browser și va fi etichetat de la
la
folosit pentru a evidenția subtitluri.

Antet de primul nivel

Parametrii specifici pentru această etichetă sunt setați folosind CSS - în acest fel puteți seta o anumită dimensiune a textului, culoare și font.

Deci, ne-am uitat la principalele modalități de a schimba dimensiunea fontului în html. Aceste informații sunt suficiente pentru a crea o pagină web cu aspect curat, ușor de citit.

Pentru comoditate, țineți cont de următoarele recomandări:

Când proiectați, nu ar trebui să vă limitați la HTML. Odată ce ați stăpânit elementele de bază ale construirii unui site web, puteți începe să învățați CSS. Acest lucru va deschide noi orizonturi în crearea de pagini web.

Testarea site-ului web finalizat în diferite browsere și pe diferite platforme nu trebuie neglijată. După cum s-a menționat mai sus, parametrii textului pot diferi semnificativ, mai ales când se utilizează versiuni învechite ale browserelor.

Ar trebui să folosiți întotdeauna spații și file atunci când scrieți cod. Acest lucru face mai ușor de citit și de înțeles.

Comentariile la cod nu sunt doar un instrument de înțelegere ușoară, ci și un semn al bunelor maniere în rândul dezvoltatorilor.

Cum se schimbă dimensiunea fontului în HTML pe un site web.

Viața noastră constă în lucruri mici de zi cu zi care ne afectează într-un fel sau altul bunăstarea, starea de spirit și productivitatea. Nu am dormit suficient - mă doare capul; Am băut cafea pentru a îmbunătăți situația și a mă înveseli – dar am devenit iritabil. Chiar vreau să prevăd totul, dar pur și simplu nu pot. În plus, toată lumea din jur, ca de obicei, oferă sfaturi: gluten în pâine - nu vă apropiați de el, vă va ucide; Un baton de ciocolată în buzunar este o cale directă către pierderea dinților. Colectăm cele mai populare întrebări despre sănătate, nutriție, boli și oferim răspunsuri la ele care vă vor permite să înțelegeți mai bine ce este bun pentru sănătatea dumneavoastră.

Cu toții am folosit celebrul editor de text Word. Și știm că este foarte ușor să schimbi fontul, dimensiunea și culoarea textului. Deci, în html puteți seta și acești parametri fără prea multe dificultăți. Există o etichetă pentru asta . Este împerecheat și, prin urmare, are o etichetă de închidere, deoarece browserul trebuie să înțeleagă unde sunt începutul și sfârșitul textului pentru care modificăm parametrii. Etichetă are trei atribute: față, dimensiune și culoare, care specifică fontul, dimensiunea și respectiv culoarea textului. În acest tutorial vom arunca o privire mai atentă asupra fonturilor.

La schimba fontul textului în html– fișier, trebuie să includem textul în etichete Şiși asigurați-vă că aplicați atributul feței. Arata cam asa:

textul nostru

Numele fonturilor pot fi vizualizate în editorul Word. Există o listă destul de lungă. Să luăm un exemplu despre cum să schimbați fontul textului în html și să scriem următorul cod:
Lecția 4. Fonturi în html
Acest text va fi scris cu fontul implicit

Acest text va fi scris cu fontul Batang

Acest text va fi scris cu font Comics Sans MS

Să salvăm fișierul sub orice nume și să vedem ce se întâmplă:

După cum vedem, totul a funcționat: primul paragraf are fontul implicit, în al doilea paragraf setăm fontul Batang, iar în al treilea textul este afișat în fontul Comic Sans MS. În principiu, totul este ușor și de înțeles, dar există o singură remarcă. Deoarece fontul specificat nu este salvat în fișierul HTML, nu există nicio garanție că va fi afișat așa cum era de așteptat în browser. Nu putem fi 100% siguri că computerul vizitatorului are fontul pe care l-am specificat, mai ales dacă acest font nu este standard. Prin urmare, în atributul față este mai bine să indicați aproximativ trei nume de fonturi, care sunt enumerate separate prin virgule, astfel încât cel puțin unul dintre ele să fie afișat cu siguranță. Să ne uităm la un exemplu:
Lecția 4. Fonturi în html
Acest text ar trebui să apară în Batang sau Comic Sans MS, sau cu siguranță în Arial.

Să ne uităm la rezultat:

Textul a fost afișat în fontul Batang, pe care l-am specificat mai întâi în atributul face. Dacă acest font nu funcționează în browserul vizitatorului, atunci al doilea font va funcționa - Comic Sans MS, iar dacă acest font nu funcționează, atunci textul va fi afișat cu siguranță în font Arial.

Alte opțiuni de font

Și pentru început, să ne uităm la alte opțiuni de font. În prima lecție, ne-am uitat deja la etichetele care stabilesc caractere aldine și cursive, acestea sunt etichete Şi respectiv. Să ne uităm la câteva etichete care stabilesc stilul fontului:
Lecția 4. Alte opțiuni de font
Să subliniem textul
~~Să tăiem această parte~~
și setați indicele pentru cuvânt ^top

Sa vedem rezultatul:

Am setat întregul text la fontul Comic Sans MS, prima linie a fost subliniată folosind eticheta , amintiți-vă de la prima lecție că eticheta
face o nouă linie, a doua linie este tăiată datorită etichetei iar în ultimul rând punem cuvântul „top” în superscript. Nimic complicat! Puteți experimenta singur cu restul etichetelor. Dacă totul este clar pentru tine, poți trece la următoarea lecție, în care ne vom uita la modul de setare a dimensiunii textului, dar dacă aveți întrebări, urmăriți videoclipul detaliat al acestei lecții.