Dimensiunea fontului contează în html rol important. Vă permite să atrageți atenția utilizatorului asupra Informații importante, postat 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 perechii este formatat eticheta fontului. 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:
- - se setează în html font aldine. Etichetă similar în acțiune cu cel precedent;
- — dimensiunea este mai mare decât cea implicită;
- — dimensiune mai mică font;
- — text italic(italice). Etichetă similară ;
- — text cu subliniere;
- tăiat;- - afișați textul numai în litere mici;
- - cu litere mari.
Text simplu
Miniatură
Miniatură
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 al fonturilor:
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 se va întâmpla dacă familia anterioară nu este setată la sistem de operare utilizator.
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 – traduce totul litere mariî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
De asemenea, valoarea poate fi setată la fonturile folosite de sistem în inscripțiile de pe diverse elemente 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
subtitrare
font:bara de stare
font: italic 50px bold „Times New Roman”, Times, serif
Aspectul site-ului de înaltă calitate are scopul principal— faceți 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ă schimbaț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 paginile 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, rețineți că afișarea textului poate varia atunci când este utilizat. browsere diferite, prin urmare, î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 Internet Explorer poate diferi în comparație cu versiunile mai 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 font html specificate î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 la corpul documentului următorul cod, apoi 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
La valoare specificată dimensiunea fontului va fi setată la 6. Puteți verifica în browser cum funcționează acest lucru și puteți experimenta diverse combinatii 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 . Este de obicei folosit împreună cu CSS pentru a edita și stila anumite părți ale documentului.
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 în acest caz, sarcina nu este doar de a schimba dimensiunea, ci și de a selecta logic o anumită parte text și atribuiți-l 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 inainte de folosit pentru a evidenția subtitluri.
- Acesta este primul nivel. Acesta va fi afișat cel mai mare în browser și va fi etichetat de la inainte de folosit pentru a evidenția subtitluri.
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ă.
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 ar trebui 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, presă și literatură, site-uri 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”
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 diverse etichete oferite de html, css este un instrument mai convenabil și mai flexibil pentru proiectare aspect fonturi.
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. Acest 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); · monospace (monospace), La fel ca standard stilurile 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 formatat folosind înseamnă 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.
Nume primul antet
Subtitrare translucida!
Aici se află primul paragraf actual exemplu. Pentru claritate aceste cuvinte va fi scris cu caractere cursive.
Vă permite să evidențiați textul cu caractere cursive, cursive sau invers pentru a crea textul vedere standard. Această proprietate are doar trei semnificații:
- normal - text standard cu un stil normal, adică nu italic sau italic
- italic - stil italic
- oblic - stil oblic
Paragraf cu valoarea normală.
Paragraf cu valoare cursiv.
Paragraf cu sensul oblic.
Încerca "Fonturile italice au fost în mod tradițional versiuni stilizate ale unui font bazat pe caligrafie, în timp ce italicele au fost create prin simpla adaugare ușoară înclinare a simbolurilor. Majoritatea fonturilor nu conțin un set de caractere italice, astfel încât browserul utilizează adesea un algoritm de înclinare pentru caracterele text. Aceasta înseamnă că, în multe cazuri, nu veți vedea o diferență între valorile italice și cele oblice.
Marimea fontului
Modificarea dimensiunii fontului într-un element - mod bun evidențiați-o vizual și acordați-i semnificație, sau invers, arătați asta aceasta informatie nu ar trebui să atragă o atenție sporită.
Pentru a modifica dimensiunea fontului, utilizați proprietatea font-size. Există mai multe moduri de a specifica dimensiunea fontului, să ne uităm la cele mai comune:
Pixeli
Valorile pixelilor sunt adesea folosite deoarece această abordare oferă foarte control precis peste dimensiune. Valoare numerica se termină cu caracterele alfabetice px, care trebuie să urmeze imediat numărului (nu trebuie să existe spațiu între număr și px).
Corp (dimensiunea fontului: 14px; )
Interes
Dimensiunea implicită a fontului în browsere este de 16 px. Deci, o valoare de 100% este 16px și 200% este 32px. Dacă definiți o regulă care spune tot textul din interiorul unui element
valoarea 75% din dimensiunea implicită (aceasta se va potrivi cu 12px) și apoi definiți o altă regulă care setează valoarea la 75% pentru aceasta element copil, atunci dimensiunea fontului din acest element va fi 9px (adică 75% din 12px).Corp (dimensiunea fontului: 100%; )
E.M.
Unitatea em vă permite să modificați dimensiunea fontului în raport cu dimensiunea fontului elementului părinte. Deoarece dimensiunea implicită a fontului în browsere este de 16 px, puteți utiliza reguli similare cu cele utilizate pentru valorile procentuale.
Corp (dimensiunea fontului: 14px; ) h2 (dimensiunea fontului: 1.2em; )
În exemplu, setăm elementul
dimensiunea fontului este de 14 px și pentru toate elementele- 1,2 em. Aceasta înseamnă că dimensiunea fontului titlurilor de al doilea nivel va fi scalată cu un factor de 1,2. În cazul nostru, dimensiunea tuturor antetelor va avea dimensiunea fontului de 1,2 elemente , ceea ce înseamnă de 1,2 ori mai mare decât 14 px și este aproximativ egal cu 17 px. (Dimensiunea reală va fi 16,8, dar majoritatea browserelor o vor rotunji la 17.)
Notă: procentele și ems sunt în esență două moduri diferite de a atinge același obiectiv. Ambele oferă posibilitatea de a seta dimensiunea în raport cu dimensiunea fontului elementului părinte.
Cuvinte cheie
CSS oferă șapte cuvinte cheie care vă permit să atribuiți o dimensiune a fontului în raport cu dimensiunea implicită (16 px): xx-small, x-small, mic, mediu, mare, x-marie și xx-mari.
P (dimensiunea fontului: mic; )
Medium este dimensiunea implicită a fontului în browsere. Valorile rămase reduc sau măresc dimensiunea fontului prin diferiți factori. Cea mai mică dimensiune a fontului, xx-small, este de aproximativ 9 pixeli, fiecare dimensiune ulterioară fiind cu aproximativ 20% mai mare decât cea anterioară:
Redimensionați folosind procente.
Redimensionați folosind pixeli.
Redimensionare folosind cuvântul cheie x-small.
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 se află începutul și sfârșitul textului pentru care modificăm parametrii. Etichetă are trei atribute: chip, 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:
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:
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:
Să subliniem textulSă 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
transferuri către linie nouă, a doua linie este tăiată datorită etichetei iar în ultimul rând ne-am instalat superscript cuvântul „top”. 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 vom vedea cum să setezi dimensiunea textului, dar dacă mai ai întrebări, aruncă o privire video detaliat această lecție.
