Familii de fonturi

postat acum 6 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!

Comentariu postate de download minecraft la data de 14.05.2019
Thankfulness to my father who told me about this web site, this weblog is in fact awesome.
Comentariu postate de free minecraft download la data de 15.05.2019
Woah! I'm really loving the template/theme of this website. It's simple, yet effective. A lot of times it's hard to get that "perfect balance" between usability and appearance. I must say you have done a superb job with this. In addition, the blog loads super fast for me on Safari. Exceptional Blog!
Comentariu postate de minecraft free download la data de 16.05.2019
It's hard to find knowledgeable people in this particular topic, but you sound like you know what you're talking about! Thanks
Comentariu postate de golden goose sale la data de 17.05.2019
I have to express my love for your kindness in support of individuals that have the need for help with this particular concern. Your personal dedication to getting the solution around became surprisingly useful and has enabled employees much like me to arrive at their ambitions. Your personal warm and helpful help signifies a whole lot a person like me and even further to my office workers. Thanks a lot; from all of us.
Comentariu postate de mojang minecraft download la data de 17.05.2019
No matter if some one searches for his vital thing, therefore he/she wishes to be available that in detail, therefore that thing is maintained over here.
Comentariu postate de free minecraft download la data de 17.05.2019
Thanks for the good writeup. It in reality was once a enjoyment account it. Look complicated to more brought agreeable from you! By the way, how could we communicate?
Comentariu postate de yeezy boost la data de 18.05.2019
I not to mention my pals came looking through the good tips found on your web page and so all of a sudden I got a horrible suspicion I had not thanked you for those secrets. All the men came for this reason passionate to learn all of them and have in effect really been loving those things. Appreciate your getting simply accommodating and then for getting varieties of nice guides millions of individuals are really eager to know about. My sincere regret for not expressing gratitude to you sooner.