Font-synthesis - CSS-Tricks

Anonim

font-systhesisProprietatea în CSS dă instrucțiunile browser pentru modul în care să se ocupe de caractere de font îngroșată și cursiv atunci când specificate font-familynu le include.

Să luăm ca exemplu Lato din Google Fonts. Se spune că există 10 variații diferite ale fontului.

Fiecare dintre aceste variații de font este din punct de vedere tehnic un fișier de font diferit. Dacă dorim să folosim anumite greutăți și stiluri, atunci am lega aceste fișiere, astfel încât browserul să aibă ceva de încărcat.

Această propoziție ar necesita în mod normal patru fișiere de font diferite.

Dar nu toate fonturile includ fișiere pentru manipularea greutății și stilului. În aceste cazuri, browserul va „sintetiza” aspectul în sine. Browserul face tot ce poate, dar îndrăzneala și stilul fals fac uneori textul mai puțin lizibil; adică mai puțin lizibil decât o versiune cu adevărat concepută. În cel mai ușor caz, putem vedea caractere suprapuse. În cazuri mai severe, textul este complet ilizibil sau poate chiar să schimbe semnificația - așa cum s-ar putea întâmpla în limbi precum chineza, japoneza, coreeana și alte scripturi logografice.

Aici font-synthesisintervine. Acesta controlează tipurile de caractere pe care browserul este permis să le sintetizeze.

Sintaxă

.element ( font-synthesis: none | ( weight || style ); )

În engleză simplă, acest lucru font-synthesisva accepta:

  • o valoare de none
  • fie weightsaustyle
  • atât weightșistyle

Este demn de remarcat faptul că font-synthesiseste considerat o proprietate de stenografie. Conform specificațiilor, este o combinație a font-synthesis-weightși font-synthesis-styleunde ambele acceptă valori ale autosau none. Deoarece este posibil să obțineți același efect folosind stenograma, acesta este probabil cel mai bun mod de a merge.

Valori

  • none: Nici îndrăzneț, nici oblic nu pot fi sintetizate
  • weight: Bold poate fi sintetizat de browser
  • style: Oblicul poate fi sintetizat de browser
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Utilizare

font-synthesispoate fi folosit cu toate elementele, inclusiv ::first-letterși ::first-linepseudo-elementele.

Pot exista cazuri în care nu permite browserului să sintetizeze îndrăzneț și oblic într-un întreg limbaj are sens, deoarece oricare dintre ele poate ascunde caractere. Iată un exemplu extras din specificația care dezactivează fețele de caractere îndrăznețe și oblice sintetizate care conțin caractere arabe:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Demo

Suport pentru browser

În momentul redactării acestui document, poate raporta o acoperire globală de 20,21% a font-synthesisproprietății.

Desktop

IE Margine Firefox Crom Safari Operă
Nu Nu 34+ Nu 9+ Nu

Mobil

Safari iOS Opera mini Browser Android Chrome pentru Android Firefox pentru Android
9+ Toate Nu Nu 68

Doriți să utilizați font-synthesisîn e-mail? Campaign Monitor raportează că este acceptat de următorii clienți:

  • Apple Mail 10+
  • Outlook pentru Mac
  • Aplicația iOS AOL Alto
  • iOS Mail 10+
  • Vrabie
  • G Suite
  • Gmail
  • Mesaje primite Google

Mai multe informatii

  • Modulul de fonturi CSS Specificația nivelului 4
  • „Test CSS3: font-synthesis“ de Eric Meyer
  • „How to Italicize Text” de Chris Coyier