Familii de fonturi

postat acum 4 ani de Stefanescu Mihai in categorie CSS

Proprietatea font din CSS se refera la familia fontului, grosimea, marimea si stilul.

Diferenta dintre fonturile Serif si Sans-Serif:

Familii de fonturi CSS

In CSS exista doua tipuri de familii:

-familia fonturilor generice – grup de fonturi ce se aseamana cu “Serif” sau “Monospace”

-Familiile de fonturi – familii specifice precum “Times New Roman” sau “Arial”

Familii Generice

Familii de fonturi

Descrere

Serif Times New Roman
Georgia
Fonturile Serif au mici liniute la sfarsitul anumitor caractere
Sans-serif Arial
Verdana
“Sans” inseamna fara – aceste fonturi sunt identice cu fonturile Serif, dar nu au liniutele de carepovesteam mai sus.
Monospace Courier New
Lucida Console
Toate caracterele au aceasi latime.

Font Family

Familia din care va face parte un text va fi setata cu proprietatea font-family.

Este recomandat sa alegeti mai multe familii de fonturi in caz ca un utilizator nu dispune de cea aleasa de voi, caz in care va incarca al doilea font din lista.

Incepe cu fontul pe care doresti sa il folosesti si termina lista cu un font generic (ce se gaseste cu siguranta pe orice computer).

Atentie: Daca numele unei familii este compusa din mai multe cuvinte trebuie sa il pui in ghilimele.

Exemplu:

p {
    font-family: "Times New Roman", Times, serif;
}

Font Style

De obicei aceasta proprietate este folosita pentru a face un anumit font italic.

Aceasta poate lua urmatoarele valori:

  • normal – Textul este afisat normal
  • italic – Textul este afisat italic (inclinat)
  • oblique – Textul este “aplecat” (in caz ca fontul folosit de tine nu are si versiune de italic).div.normal {font-style:normal;}
    div.italic {font-style:italic;}
    div.oblique {font-style:oblique;}

Font Size

Aceasta proprietate seteaza dimensiunea fontului.

Lucru foarte important in web design, oricum nu ar trebuii sa faci fontul din paragrafe sa arata ca cel din heading (h1, h2, s.a.m.d) sau invers.

Foloseste mereu tag-urile HTML prestabilite <h1> … <h6> pentru heading-uri si <p> pentru paragrafe.

Dimensiunea poate fi absoluta sau relativa:

Absoluta:

  • Seteaza textul la o anumita dimensiune
  • Nu permite modificarea dimensiunii din browser.

Relativa:

  • Seteaza dimensiunea ralitava fata de elementele alaturate
  • Permite modificarea din browser.

! Daca nu setezi o dimensiune textului, acesta va lua dimensiunile standard (ex: paragraful = 16px=1em).

Seteaza dimensiunea in Pixeli

Setarea dimensiunii textului in pixeli iti da control total asupra acestuia:

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Exemplul de mai sus permite browserelor Internet Explorer 9, Firefox, Chrome, Opera si Safari sa modifice dimensiunea.

Nota: Dimensiunea textului poate fi modificata din browser folosind optiunea zoom.

Seteaza dimensiunea in Em

Pentru a evita problemele deredimensionare a textului in versiunile mai vechi de Internet Explorer sunt folositi em in loc de pixeli.

Aceasta unitate de masura (Em) este recomandata de W3C.

Un em este egal cu dimensiunea curenta a textului, care este de 16px…deci 1em = 16px.

Pentru a transforma pixelii in emputeti utiliza formule: pixeli/16=em.

 h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

In acest exemplu, dimensiunea textului in em este la fel ca cea in pixeli din exemplul anterior. In fine, cu em-uri este posibila redimensionarea textului din browser.

Din pacate, tot exista probleme in versiunile mai vechi de IE.

Combina procentaje cu Em

O combinatie ce functioneaza in toate browserele, seteaza font size pentru tag-ul <body> in procente:

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!