Sintesi dei caratteri - Trucchi CSS

Anonim

La font-systhesisproprietà in CSS fornisce le istruzioni del browser su come gestire i caratteri in grassetto e corsivo quando il carattere specificato font-familynon li include.

Prendiamo Lato da Google Fonts come esempio. Dice che ci sono 10 diverse varianti del carattere.

Ciascuna di queste variazioni di font è tecnicamente un file di font diverso. Se vogliamo utilizzare determinati pesi e stili, collegheremo quei file in modo che il browser abbia qualcosa da caricare.

Questa frase normalmente richiederebbe quattro file di caratteri diversi.

Tuttavia, non tutti i caratteri includono file per la gestione del peso e dello stile. In questi casi, il browser "sintetizzerà" l'aspetto stesso. Il browser fa del suo meglio, ma il grassetto e lo stile falsi a volte rendono il testo meno leggibile; cioè, meno leggibile di una versione realmente progettata. Nel più lieve dei casi, potremmo vedere i caratteri sovrapposti. Nei casi più gravi, il testo è completamente illeggibile o potrebbe persino cambiare il significato, come potrebbe accadere con lingue come cinese, giapponese, coreano e altri script logografici.

È qui che font-synthesisentra in gioco. Controlla quali caratteri tipografici il browser è autorizzato a sintetizzare.

Sintassi

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

In parole povere, questo significa font-synthesische accetterà:

  • un valore di none
  • o weightostyle
  • sia weightestyle

Vale la pena notare che font-synthesisè considerata una proprietà di stenografia. Secondo le specifiche, è una combinazione di font-synthesis-weighte font-synthesis-styledove entrambi accettano valori di autoo none. Poiché è possibile ottenere lo stesso effetto usando la scorciatoia, questo è probabilmente il modo migliore per farlo.

Valori

  • none: Né grassetto né obliquo possono essere sintetizzati
  • weight: Il grassetto può essere sintetizzato dal browser
  • style: Oblique può essere sintetizzato dal 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 */

Utilizzo

font-synthesispuò essere utilizzato con tutti gli elementi, comprese le ::first-lettere ::first-linepseudo-elementi.

Potrebbero esserci casi in cui non consentire al browser di sintetizzare grassetto e obliquo su un'intera lingua ha senso perché uno dei due può oscurare i caratteri. Ecco un esempio tratto dalla specifica che disabilita i caratteri in grassetto e obliqui sintetizzati contenenti caratteri arabi:

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

Demo

Supporto del browser

Al momento della scrittura, caniuse riporta una copertura globale del 20,21% per la font-synthesisproprietà.

Desktop

IE Bordo Firefox Cromo Safari musica lirica
No No 34+ No 9+ No

Mobile

iOS Safari Opera Mini Browser Android Chrome per Android Firefox per Android
9+ Tutti No No 68

Vuoi usare font-synthesisnella posta elettronica? Campaign Monitor segnala che è supportato dai seguenti client:

  • Apple Mail 10+
  • Outlook per Mac
  • App AOL Alto per iOS
  • iOS Mail 10+
  • Passero
  • G Suite
  • Gmail
  • Posta in arrivo di Google

Maggiori informazioni

  • Specifica di livello 4 del modulo dei caratteri CSS
  • "CSS3 test: font-synthesis" di Eric Meyer
  • "How to Italicize Text" di Chris Coyier