Cum se utilizează cel mai bine fonturile în CSS?



Acest articol vă va prezenta un subiect simplu, dar important, care este Fonturi în CSS și vă va oferi, de asemenea, o demonstrație practică pe această temă.

Acest articol vă va prezenta un subiect simplu, dar important, care este Fonts In și vă va oferi, de asemenea, o demonstrație practică pe această temă. Următoarele indicații vor fi tratate în acest articol,

Site-urile web transportă conținut sub formă de imagini, conținut audio, video și text. Cu toate acestea, majoritatea paginilor web se bazează încă pe text ca format predominant. Acest lucru se datorează faptului că textul simplu oferă câteva avantaje foarte semnificative.





Citibilitate neintruzivă - Doriți să verificați cel mai recent scor de meci în timp ce sunteți la birou. Evident, doriți o actualizare rapidă a textului, nu un videoclip zgomotos!
Cerință de lățime de bandă redusă - Conținutul textului poate fi încărcat chiar și în zonele slabe de conectivitate la internet, în timp ce mass-media bogată nu.
Căutare prietenoasă - Site-urile web urmăresc întotdeauna cât de ușor se observă conținutul lor pe motoarele de căutare. Textul este cel mai potrivit pentru acest lucru, cel puțin până când AI preia complet internetul!

În timp ce formatează conținut text, designerii web au doar câțiva parametri pe care să lucreze - font, aliniere, evidențiere și culoare. Selectarea fontului potrivit pentru textul dvs. este o alegere critică. Practica standard este de a utiliza etichete de font CSS pentru a defini fonturi pentru text în paginile HTML.
Dacă sunteți nou în lumea programării HTML, faceți un tur de bază aici. S-ar putea să doriți să citiți elementele de bază CSS înainte de a începe să aflați despre fonturile CSS.



Pentru un tutorial CSS complet, vizitați Edureka CSS Tutorial pentru începători. Veți obține un heads-up excelent pe modul în care CSS va fi utilizat pentru a spori designul web HTML.

Continuăm cu acest articol despre Fonturi în CSS

Fonturi în CSS

Un font este practic un set de caracteristici asociate cu afișarea textului. Fonturile sunt diferențiate între ele prin dimensiunea, indentarea, lățimea, înclinarea și așa mai departe. Să începem cu un afișaj text de bază în diferite fonturi.



Exemplul 1: titluri și paragraf în diferite fonturi

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}

Paragraful în caractere italice aldine cu caractere georgiene

logică fuzzy în inteligența artificială
 Exemplul 1: ieșire 

Ieșire- Font în CSS- Edureka

În exemplul 1, avem 3 linii diferite de text în diferite fonturi. Ați observa că fiecare dintre fonturi variază în funcție de lățimea caracterelor, indentări etc.

Continuăm cu acest articol despre Fonturi în CSS

Atribute în font CSS

Fonturile CSS au 4 atribute principale - stil, greutate, dimensiune și familie. Atributul de stil denotă normal sau cursiv. Greutatea arată fontul ca simplu sau îndrăzneț. Greutatea poate fi exprimată și numeric. Dimensiunea este pur și simplu dimensiunea fontului mai mare, cu cât textul este mai mare. Există mai multe moduri în care dimensiunea fontului poate fi atribuită, descrieri detaliate sunt date în secțiunile ulterioare. Atributul familiei este de a atribui numele fontului textului.

În exemplul 1, am folosit diferite nume de fonturi pentru titluri și paragraf. Sub etichetele h1 și p, vedem două nume de fonturi listate, în timp ce etichetele h2 denumesc doar un singur font. Aceasta este definiția unei familii de fonturi, mai multe despre aceasta mai târziu.

Continuăm cu acest articol despre Fonturi în CSS

atribut stil font:

Cele două stiluri principale care pot fi setate sunt „normal” și „italic”. Cursivele ar trebui să fie cursive în natură cu o înclinație. Normal este opțiunea implicită care este dreaptă. Există o altă opțiune mai puțin utilizată numită „oblică”, care seamănă cu opțiunea cursivă în majoritatea fonturilor. De asemenea, puteți seta stilul să „moștenească” astfel încât să preia stilul fontului din elementul său părinte.

Exemplul 2: Opțiuni stil de font
font-family: verdana

stil de font: normal

dimensiunea fontului: 15

Verdana font normal
font-family: verdana

cel mai bun software pentru programarea java

stil font: italic

dimensiunea fontului: 15

Font Verdana italic
font-family: verdana

stil font: oblic

dimensiunea fontului: 15

Verdana font oblic

Continuăm cu acest articol despre Fonturi în CSS

atribut font-weight:

Acest atribut decide dacă fontul trebuie să pară gros sau subțire. Poate fi setat la „normal” sau „aldin”. Valoarea implicită este normală. Această valoare poate fi setată și ca numerică. Greutatea de 400 reprezintă normală, iar 700 este pentru bold. Există puține alte setări (variind de la 100 - foarte ușoare la 900 - foarte îndrăznețe), dar nu sunt acceptate de toate fonturile. Toate opțiunile de greutate sunt prezentate în exemplul 3.

Exemplul 3: Opțiuni pentru greutatea fontului
font-family: verdana

font-weight: normal

dimensiunea fontului: 15

Verdana greutate normală
font-family: verdana

font-weight: bold

dimensiunea fontului: 15

Verdana greutate îndrăzneață
font-family: verdana

greutate font: 500

dimensiunea fontului: 15

Greutate numerică Verdana

Continuăm cu acest articol despre Fonturi în CSS

atribut dimensiune font:

Atributul de dimensiune poate fi setat în mai multe moduri. Să enumerăm mai jos aceste moduri.
● Valoare enumerată, cum ar fi „medie”, „mare”. De fapt, la fel ca mărimile de îmbrăcăminte, valorile pot varia de la XX Small la XX Large!
● Setați în raport cu elementul părinte, ca „mai mare” sau „mai mic”.
● Procentul dimensiunii elementului părinte.
● Setați ca „moștenire” pentru a adopta direct dimensiunea elementului părinte.
● Ca valoare absolută în unitățile de px (pixeli), pt (puncte) sau cm (centimetru)
„Mediu” este valoarea implicită setată pentru acest parametru.

Continuăm cu acest articol despre Fonturi în CSS

atribut font-family:

În HTML, familia de fonturi CSS este pentru setarea numelui fontului. Puteți pur și simplu să puneți un singur nume de font cu eticheta. Sau puteți atribui mai multe valori ca o listă de familie de fonturi care definește prioritatea în care browserul ar trebui să aleagă fontul.
Lista este prioritizată de la stânga la dreapta, sub forma unui sistem de rezervă. Se alege prima valoare, dacă este disponibilă, sau controlul merge la următoarea, până când se ajunge la sfârșitul listei. Familia de fonturi implicită este definită de preferințele browserului.
Familiile de fonturi CSS sunt de 2 tipuri - familii generice și familii de fonturi.
● Familii generice - pe baza unor caracteristici generale, fonturile sunt grupate ca „serif”, „sans serif”, „monospace” etc. De exemplu, Sans serif înseamnă fonturi fără stilul serif.
● Nume de familie - fonturi aparținând unor ierarhii specifice de familie. Times, Arial, Courier sunt toate familii de fonturi și Times New Roman este un exemplu de font al familiei Times.
Diversele opțiuni de utilizare a familiei de fonturi sunt enumerate în exemplul 4 de mai jos.

declarație c ++ goto
Exemplul 4: Opțiuni familie de fonturi
font-family: verdanaVerdana font unic
font-family: „Times New Roman”, Times, CourierTimes New Roman urmat de familii de fonturi
font-family: Arial, minivan, sans-serifArial urmat de familii generice

Câteva puncte comune de remarcat

● Ca și alte câteva proprietăți CSS, unele dintre setările fontului variază în diferite browsere. Verificați dacă există suport pentru browser înainte de a utiliza unele setări rare de fonturi.
● Puteți seta setările de font separat folosind etichetele individuale de stilul fontului, fontul-greutate, etc. Alternativ, dacă preferați codul compact, puteți utiliza atributul font scurt cu toate valorile din aceeași linie.
● În scenariile utilizatorului în care doriți ca fontul să varieze în funcție de dimensiunea browserului, există o setare utilă pentru dimensiunea fontului, numită setare a fontului receptiv. Poate fi setat cu o unitate vw, ceea ce înseamnă „lățimea ferestrei”. În acest fel, dimensiunea textului va urma dimensiunea ferestrei browserului.

Sper că ați găsit informațiile pe care le căutați pe Fonts In CSS. Împărtășiți-ne experiența dvs. în secțiunea de comentarii de mai jos. Proiectare fericită!

Dacă sunteți interesat să aflați mai multe despre dezvoltarea web, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).