CSS oferă o serie de proprietăți pentru ajustarea aspectului textului. Acestea includ specificarea fontului, stilului textului și umbrelor.
Sub proprietățile CSS legate de font se includ informații despre font, stilul fontului și greutatea fontului. Aceste proprietăți sunt utile în principal pentru elementele HTML care conțin text (p, i etc.). Ele pot fi folosite și în tabele.
Prin intermediul proprietății font-family se specifică fontul folosit.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Rezultatul în browser arată astfel:
Exemple de fonturi tipice sunt Arial, Helvetica și Times Roman. Prin proprietatea CSS font-family se specifică fonturile dorite. Dacă sunt specificate mai multe fonturi, ordinea este importantă. Dacă primul font specificat este disponibil, acesta va fi folosit. Fonturile dorite se scriu separate prin virgulă. În mod obișnuit, se adaugă și o familie generică de fonturi la final. Prin intermediul acestei familii generice, browserul poate alege un font similar celui specificat.
• serif = font cu serif
• sans-serif = font fără serif
• cursive = font cursiv
• fantasy = font în stil fantasic
• monospace = font cu caractere de latime egală.
Stilul fontului
Prin proprietatea font-style, puteți specifica stilul fontului. Dacă fontul ales permite, prin valoarea italic se poate obține o scriere în stil cursiv.
Alte fonturi pot fi înclinate folosind oblique.
Următoarea propietate CSS care poate influența aspectul textului este font-variant. Prin aceasta se pot defini majuscule mici.
Pentru a specifica majuscule mici, se atribuie proprietății font-variant valoarea small-caps.
Mărimea fontului
O specificare importantă este cea a mărimii fontului. CSS oferă proprietatea font-size pentru acest lucru. Mărimea fontului poate fi specificată în diferite unități.
• EM
• REM
• Pixel
• Procent
• Cuvinte-cheie
Ca cuvinte-cheie sunt disponibile următoarele variante:
• xx-small – foarte, foarte mic
• x-small – foarte mic
• small – mic
• smaller – mai mic decât în elementul părinte
• medium – mediu
• large – mare
• x-large – foarte mare
• xx-large – foarte, foarte mare
• larger – mai mare decât în elementul părinte
Un exemplu de cum se poate specifica mărimea fontului:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Și astfel arată în browser:
Vă rugăm să rețineți că definirea mărimii fontului este foarte complexă, deoarece diferitele unități de măsură au fiecare avantaje și dezavantaje distincte.
Pentru a obține o listă detaliată a când ar trebui să folosiți fiecare unitate de măsură, vă recomandăm să consultați pagina http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Pentru cei care nu doresc să citească întregul articol, spor la însumare: Utilizați valori relative, cum ar fi em pentru afișajul pe ecran. Pentru machetele destinate printării, folosiți unități absolute precum pt.
Greutatea fontului
Următorul pas este determinarea greutății fontului. Prin aceasta, se specifică grosimea unui font. Proprietatea folosită în acest sens este font-weight.
.fett {
font-weight:bold;
}
Prin această sintaxă, textul evidențiat va fi afișat cu o grosime mai mare.
Valorile posibile sunt bold (gras), bolder (foarte gras), lighter (mai subțire) și normal. De asemenea, sunt permise valorile numerice 100, 200, 300, 400, 500, 600, 700, 800 și 900. Acestea acoperă de la extra-subțire (100) până la foarte gros (900).
Rezumat definiții
În contextul definițiilor tipografiilor, joacă un rol important și proprietatea line-height, prin care se poate defini înălțimea liniilor. Voi reveni mai detaliat asupra acestei proprietăți mai târziu. La acest punct trebuie menționată doar deoarece joacă un anumit rol în legătură cu proprietatea font prezentată mai jos.
Puteți combina informațiile prezentate până acum despre afișarea fontului. Pentru aceasta se folosește proprietatea generală font. Aceasta include următoarele informații individuale sau le cuprinde.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Prin font se pot combina diferite formate de tipar. În acest sens, puteți specifica proprietățile menționate anterior, dar nu este obligatoriu să le folosiți pe toate. Totuși, proprietățile pentru dimensiunea și familia de fonturi sunt obligatorii.
Conținuturile fișierelor CSS pot fi menținute mai scurte și mai clare datorită modului succint de scriere.
Este important să păstrați ordinea prezentată mai jos. Dacă sunt notate cele două proprietăți font-size și line-height, acestea trebuie separate printr-o linie oblică. Dacă la această etapă se oferă doar o valoare, aceasta reprezintă font-size.
Un exemplu:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust a fost dezvoltat pentru a putea afișa fonturile aproximativ de aceeași dimensiune. Diferite fonturi au înălțimi de x diferite la aceeași înălțime a literelor. Cu toate acestea, fonturile cu un x mai mare sunt mai ușor de citit. Astfel, poate apărea situația în care un document devine greu de citit dacă fontul original nu este disponibil și este înlocuit de un altul cu un x mai mic. Cu font-size-adjust, acest diferență poate să fie echilibrată.
Un exemplu:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Într-un tutorial ulterior veți învăța mai multe modalități de a vă ajusta aparența textului de pe site-ul web.
