`font-style` în CSS

Alege varianta înclinată (italic sau oblique) a fontului sau revine la textul drept.

Sintaxă CSS

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

Ce face `font-style`

font-style controlează dacă textul apare drept (normal) sau înclinat. Elementele <em>, <i> și <cite> au implicit font-style: italic.

italic folosește fața cursivă desenată special de designerul fontului (literele au adesea altă formă, nu doar sunt înclinate). oblique înclină textul obișnuit; la fonturile variabile cu axa slnt poți da și unghiul, de exemplu oblique 10deg.

Dacă fontul nu are o față italic încărcată, browserul înclină singur literele (italic „sintetic”), iar rezultatul arată mai slab. Poți opri acest comportament cu font-synthesis: none (sau font-synthesis-style: none) și încarci fișierul italic real prin @font-face.

Valori uzuale

Valoare	Descriere
`normal`	Text drept (valoarea implicită).
`italic`	Fața cursivă a fontului; dacă lipsește, browserul o simulează înclinând textul.
`oblique`	Text înclinat; implicit aproximativ 14 grade.
`oblique <unghi>`	Înclinare cu unghi precis (de la -90deg la 90deg), utilă la fonturile variabile.

Exemple

Exemplul 1: Citat cu autor în italic și sublinierea revenită la normal

Textul citatului este cursiv, iar numele dintr-un <em> interior revine la drept, ca să iasă în evidență prin contrast.

blockquote {
  font-style: italic;
  color: #334155;
}
blockquote em {
  font-style: normal;
  font-weight: 600;
}
/* <blockquote>„Iașiul are cele mai frumoase toamne”, spunea <em>Ana</em>.</blockquote> */

Efect vizual în browser

Fraza din citat apare înclinată, cu litere cursive, în gri-închis. Cuvântul „Ana” este drept și ceva mai gros, deci iese în evidență în interiorul textului înclinat.

Exemplul 2: Fără italic fals: încarci fața cursivă reală

Declari fișierul italic în @font-face și interzici browserului să simuleze înclinarea.

@font-face {
  font-family: "Inter";
  src: url("/fonturi/Inter-Italic.woff2") format("woff2");
  font-style: italic;
}
body {
  font-family: "Inter", sans-serif;
  font-synthesis: none;
}