Stiluri pentru fonturi

Stiluri pentru fonturi

Aceste elemente specifică argumentul fontului care se asociază unui element HTML fiind incluse ori în zona HEAD ori în interiorul etichetei dorite.
În cazul de faţă se remarcă asemănarea cu eticheta font din HTML care acceptă argumentele type, style, size şi weight.

font-family
font-family este de fapt o listă de fonturi din care browserul va folosi în ordinea în care le recunoaşte (primul folosit va fi întâiul din listă, dacă nu este recunoscut îl foloseşte pe al doilea şi tot aşa mai departe). Este propus ca ultima poziţie din listă să fie un font generic (de exemplu serif, sans-serif sau monospace).
În situaţia în care numele fontului este format din două cuvinte, se încadrează între ghilimele duble pentru ca browserul să le interpreteze împreună.

Exemplu: CSS introdus în HEAD fixat etichetei p. Browserul nu recunoaşte primele două fonturi din listă, folosindu-l pe al treilea:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>

Exemplu: acelaşi exemplu dar CSS introdus în eticheta p din HTML:

Cod:

<html>
<head>
<title>Exemplu</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>

font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o funcţionare asemănătoare cu eticheta <font>.

Exemplu: CSS introdus în HEAD așezat etichetei p, măsură exprimată în pixeli:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>

Pentru mărimea exprimată în puncte folosim acelaşi exemplu înlocuind px cu pt.

Dimensiunea exprimată prin keywords foloseşte cuvinte în loc de cifre. Şapte cuvinte înlocuiesc mărimile de la 1 la 7 de la vechea etichetă FONT FACE din HTML.
CSS keyword numar FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7

Pentru verificare se poate folosi exemplul anterior în care se înlocuieşte 20px cu unul din cuvintele de mai sus.

Procentele sunt o altă valoare pe care o poate lua font-size. Această modalitate poate fi vizualizată diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimbând 20px cu 200%.

font-style
font-style este întrebuințat pentru a adăuga caracteristica italică fontului. Poate lua valorile normal şi italic.

Cod:

<style type="text/css">

</style>

font-weight
font-weight este parametrul care stabileşte grosimea caracterului putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

Cod:

<style type="text/css">

</style>

Compunerea stilurilor
Stilurile prezentate anterior pot fi utilizate simultan în interiorul aceeaşi etichete fiind despărţite de caracterul ; (punct şi virgulă).

Exemplu: utilizarea unui stil compus aplicat etichetei p

Cod:

<html>
<head>
<title>Exemplu 3_4</title>
<style type="text/css">

</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>