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,
- Fonturi în CSS
- Atribute în font CSS
- atribut stil-font
- atributul font-weight
- atributul dimensiunii fontului
- atributul font-family
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
Î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: verdanacel 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: verdana | Verdana font unic |
font-family: „Times New Roman”, Times, Courier | Times New Roman urmat de familii de fonturi |
font-family: Arial, minivan, sans-serif | Arial 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).