Regula CSS @font-face
Paginile web nu sunt limitate la fonturile deja instalate pe calculatorul vizitatorului. După ce ai găsit un font care îți place, pune fișierul lui pe serverul tău web și definește-l cu regula CSS @font-face. Browserul îl descarcă apoi automat ori de câte ori este nevoie de el.
Formate comune de fonturi
Două grupuri de formate de fonturi sunt folosite mai mult decât oricare altele: WOFF/WOFF2 pe paginile web și TTF/OTF pe desktop.
WOFF și WOFF2 (Web Open Font Format): Fiind construite pentru fișiere de dimensiuni mici, aceste formate se potrivesc cel mai bine paginilor web, iar toate browserele majore le acceptă. WOFF datează din 2009 și a devenit între timp o Recomandare W3C.
TTF și OTF (TrueType Fonts și OpenType Fonts): Apple a creat TTF la sfârșitul anilor 1980, iar acesta rămâne cel mai comun format atât pe Mac OS, cât și pe Microsoft Windows. OTF, de la Microsoft și Adobe, extinde TTF într-un format mai avansat, scalabil, cu caracteristici tipografice bogate. Ambele au devenit populare datorită accesibilității și calității lor, deși niciunul nu a fost optimizat pentru utilizarea pe web.
Folosirea fontului personalizat
Doi descriptori configurează un font personalizat în @font-face: font-family îi dă un nume (de ex. „myFont”), iar src indică fișierul lui.
Un element HTML preia apoi fontul atunci când proprietatea sa font-family folosește acel nume.
Exemplu
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Font Usage</title>
<style>
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
p {
font-family: myFont;
}
</style>
</head>
<body>
<h1>Custom Font Example</h1>
<p>This paragraph uses a custom font called "myFont", loaded with the @font-face rule.</p>
</body>
</html>
Font personalizat îngroșat (bold)
Textul îngroșat are nevoie de propria regulă @font-face, care conține descriptori pentru versiunea îngroșată.
Caracterele îngroșate se află într-un fișier de font separat, iar browserele apelează la el ori de câte ori textul din acea familie de fonturi trebuie afișat îngroșat.
Sfat: Poți scrie oricâte reguli @font-face pentru un singur font.
Exemplu
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold Custom Font</title>
<style>
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
p {
font-family: myFont;
}
</style>
</head>
<body>
<h1>Bold Custom Font Example</h1>
<p>This text uses the regular version of the custom font.</p>
<p><b>This text uses the bold version of the custom font.</b></p>
</body>
</html>
Descriptori CSS @font-face
Acești descriptori de font pot fi folosiți în @font-face:
font-family— Obligatoriu. Numele pe care îl dai fontului.src— Obligatoriu. URL-ul la care se găsește fișierul fontului.font-stretch— Opțional. Modul în care este întins fontul. Valoarea implicită este „normal”.font-style— Opțional. Modul în care este stilizat fontul. Valoarea implicită este „normal”.font-weight— Opțional. Cât de gros este fontul. Valoarea implicită este „normal”.font-display— Opțional. Cum se comportă încărcarea și afișarea fontului. Valoarea implicită este „auto”.unicode-range— Opțional. Ce caractere Unicode sunt acceptate de font. Valoarea implicită este „U+0-10FFFF”.