Introducere în proprietățile fontului CSS
Proprietățile fontului CSS oferă o prezentare a proprietăților fontului CSS. Foile de stil Cascading, mai cunoscute sub numele de CSS, este un limbaj de design ușor conceput pentru a simplifica paginile web producătoare să arate grozav. CSS se ocupă de aspectul și experiența unei părți a unei pagini web. Aplicând CSS, puteți controla culoarea cu textul, stilul fonturilor, spațiul dintre paragrafe, modul în care vor fi dimensionate coloanele, precum și, prezentate, imaginile de fundal sau culorile utilizate, stilurile de dispunere, variantele afișate mai multe dispozitive, precum și, dimensiuni de ecran, pe lângă o serie de alte efecte. CSS este simplu de înțeles și, de asemenea, înțelege, dar oferă un control eficient al demonstrației documentului HTML. Cel mai adesea, CSS este de obicei combinat cu limbaje de marcare HTML sau pur și simplu XHTML.
- CSS se referă la foile de stil în cascadă.
- CSS identifică modul în care elementele HTML ar trebui să fie afișate pe ecran, pe hârtie și, de asemenea, constau din suporturi.
- CSS va economisi multă muncă. Acesta ar putea controla aspectul mai multor pagini web simultan.
- Foile de stil externe vor fi păstrate în fișiere CSS.
Explicați diferite proprietăți ale fontului CSS
Mai jos sunt diferite proprietăți de fonturi CSS:
Colecția de fonturi: în CSS puteți selecta fontul pe care doriți să-l utilizați pentru textul din interiorul unui anumit element, setând proprietatea familiei de fonturi într-o regulă de stil, dar înainte de a intra în detalii despre font-family, va trebui să înțelegem cum să utilizăm numele de font, deoarece atunci când creăm o pagină web nu știm întotdeauna ce utilizatorul nostru va folosi pentru a vizualiza pagina web.
Definiți cele cinci categorii de fonturi în CSS de standarde
- Primele dintre aceste categorii sunt categoriile de fonturi serif. Un exemplu de font specific care s-ar încadra în această categorie ar fi Times sau Times New Roman, precum și Baskerville, Century și Schoolbook.
- Acestea sunt nume de fonturi specifice, cum ar fi Baskerville, Century și Schoolbook; acestea sunt numele de fonturi pe care le puteți vedea într-o listă derulantă atunci când selectați un font în interiorul unui procesor de text, deoarece procesorul de texte știe exact ce este instalat pe mașina dvs. Dar pentru CSS, toate aceste fonturi ar intra în categoria fonturilor serif.
- Există, de asemenea, un set de fonturi sans-serif și un font popular care se încadrează în această categorie este Arial. În cazul în care nu știai, serif, așa că sunt la rândul lor mici linii la sfârșitul unei scrisori, acestea fac ca literele să pară puțin fanteziste și înfrumusețate. Puteți vedea diferența dintre literele R care sunt mai jos.
- R-ul din stânga este un Arial, care este sans-serif, literalmente fără înfrumusețări, în timp ce R-ul din dreapta este Times New Roman și conține câteva lovituri în plus aici și acolo. În general, oamenii găsesc fonturile sans-serif mai ușor de citit pe un ecran LCD și LED.
- Există, de asemenea, categorii pentru fonturi cursive, care arată un pic ca litere scrise de mână și fonturi fantastice, care pot arăta ca orice, dar majoritatea desenelor nu vor folosi foarte mult aceste fonturi, deoarece pot fi greu de citit și, de asemenea, puțin imprevizibil.
- În cele din urmă, există o categorie pentru fonturile monospațiate. Acestea sunt fonturile care oferă o spațiere egală fiecărei litere și acesta este probabil fontul pe care doriți să îl utilizați în editorul de text pe care îl utilizați pentru a crea CSS și, de asemenea, fontul pe care doriți să îl utilizați pe o pagină web pentru a afișa cod într-o pagină web.
Rezultate în browserul Web:
ieşire:
Rezultate în browserul Web:
ieşire:
Rezultate în browserul Web:
ieşire:
Rezultate în browserul Web:
ieşire:
Rezultate în browserul Web:
ieşire:
Familii de fonturi
Mai jos explicația arată familiile de fonturi:
- Multe modele CSS vor seta proprietatea familiei de fonturi pe numele unui font specific, cum ar fi Arial. Cu toate acestea, există întotdeauna șansa ca fontul specific pe care îl doriți ca Arial, să nu fie disponibil pe sistemul unui utilizator dat. Și acesta este unul dintre motivele pentru care puteți specifica cât mai multe fonturi doriți într-o listă delimitată prin virgule, iar browserul va utiliza primul care se potrivește.
În conformitate cu ecranul de mai sus, avem prima opțiune, o a doua opțiune și dacă niciunul dintre aceste fonturi nu este disponibil, revenim la sans-serif generic, deoarece chiar dacă browserul nu are niciunul dintre celelalte fonturi pe care trebuie să le ofere un font implicit pentru acea categorie. Desigur, asta ridică problema ce fonturi sunt sigure de utilizat pentru designul web. În general, nu puteți greși cu Arial, Verdana, Times și Courier, dar am furnizat aici o listă de alte fonturi care sunt frecvent disponibile pe mai multe platforme.
- Helvetica este un font comun pe care îl vedeți listat în multe foi de stil, dar Helvetica nu este disponibil pe Windows. Windows furnizează Arial în schimb.
- Familia de fonturi este una dintre acele proprietăți moștenite. Așadar, dacă o setăm la nivelul corpului, atunci alineatele și div-urile și ancorele din interiorul acelui corp vor ridica acea familie de fonturi în mod implicit, dacă nu o anulăm. Deci, de exemplu, acest antet aici, această etichetă h1, moștenește familia de fonturi de la corp, dar nu trebuie să fie așa.
ieşire:
Putem spune că pentru h1 familia de fonturi ar trebui să fie Times New Roman, Serif și, dacă reîmprospătați paginile web, schimbarea s-a reflectat.
Dimensiunea și stilurile de caractere
Mai jos informații detaliate despre dimensiunea și stilurile de caractere:
- O altă caracteristică a fonturilor pe care doriți să le controlați este dimensiunea și atunci când setați dimensiunea, va trebui să alegeți mai întâi între unitățile absolute sau relative.
- Mărimile absolute sunt de obicei specificate în pixeli și pixeli vă oferă un control foarte precis asupra dimensiunii fontului.
- Unitățile relative, cum ar fi procentele sau cuvintele cheie mai mari sau mai mici sau ems, vă permit să setați o dimensiune a fontului bazată pe unele linii de bază, deci 2em ar fi de două ori mai mare decât valoarea de bază și 0. 8em ar fi 80% din linia de bază. Mulți oameni folosesc astăzi ems pentru dimensiunea relativă a fontului. Unul dintre motive este că mărimile relative permit utilizatorului să își extindă textul folosind browserul său, iar acest lucru ar putea dori să facă, deoarece textul le este greu de văzut. Mărimile relative permit asta.
Rezultate în browserul Web:
ieşire:
- Unele dintre celelalte proprietăți ale unui font pe care le puteți seta sunt stilul fontului pentru a forța fontul italic sau greutatea fontului pentru a face un font cu caractere aldine. Iar proprietatea font-variantă va aduce o caractere tipografice care folosește doar litere majuscule.
Rezultate în browserul Web:
ieşire:
- Primul lucru pe care vrem să-l facem este să depreciază puțin acel element h1. Trebuie să fie un element h1, deoarece este antetul principal pentru această pagină, dar este un pic prea mare pentru punctul nostru de vedere. Așadar, permiteți-mi să așez dimensiunea fontului la 1.2ems. Acest lucru va reduce acest lucru un pic, deoarece, de obicei, o etichetă h1 va fi mult peste 1.2ems. Următoarea problemă pe care dorim să o abordăm este listarea codurilor aici. Ne dorim ca acesta să fie un font monospațial și există câteva dorințe diferite pentru a realiza acest lucru. Pentru codul de mai jos.
Rezultate în browserul Web:
ieşire:
Rezultate în browserul Web:
ieşire:
Aici vrem să folosim eticheta pre, ceea ce înseamnă că acesta este un text preformatat și vă rugăm să nu încercați să îl manipulați.
Rezultate în browserul Web:
ieşire:
Este proprietăți shorthand ale stilului de font. Ca font-style italic, font-size 0, 9em și font-family font;
Rezultate în browserul Web:
ieşire:
Concluzie
Cum se specifică fonturile folosind CSS și diferența dintre un font specific precum Arial și categoriile generice de fonturi web, cum ar fi serif și sans-serif. De asemenea, gestionăm dimensionarea fonturilor și pro și contra de dimensiuni relative față de dimensiuni absolute, în sfârșit, folosim proprietățile fontului și învățăm fonturile de încărcare cu familia de fonturi.
Articole recomandate
Acesta a fost un ghid pentru proprietățile fontului CSS. Aici am discutat diferite proprietăți de fonturi CSS și cinci categorii de fonturi în CSS-uri standard, cu rezultate și rezultate ale browserului. puteți parcurge și alt articol sugerat pentru a afla mai multe-
- Ce este CSS?
- Introducere în CSS
- Cariera în CSS
- Avantajele CSS