Share
I caratteri Web hanno aiutato a dare vita ai design, aiutandoci a evitare le impostazioni predefinite del sistema così ampiamente utilizzate durante i primi giorni del web design. Con così tante opzioni disponibili oggi, abbiamo un sacco di trucchi per riempire le nostre maniche al fine di servire e personalizzare i caratteri personalizzati. Il Livello 4 del CSS Fonts Module delinea le opzioni più interessanti che ti piaceranno, tra cui alcune interessanti proprietà come font-min / max-size. Questo articolo non scoprirà tutte le ultime briciole del livello 4, ma evidenzierà le parti interessanti ancora nella loro infanzia. L'avventura inizia ora!
Attualmente ci sediamo tra due livelli di specifiche. Da un lato abbiamo il livello 3; una specifica che è stata alla "Candidate Recommendation" da ottobre 2013. In prospettiva abbiamo il livello 4; una specifica che è stata appoggiata a "Working Draft" da luglio 2017. Se hai bisogno di un promemoria per quanto riguarda l'ordine delle fasi di specifica del W3C, prendiamoci un momento per esaminarle:
Ora che comprendiamo le fasi delle specifiche, immergetevi nelle viscere del livello 4 e portate alla luce alcune delle funzionalità note e documentate nuove di questo modulo.
Parti del livello 3 che diventeranno standardizzate saranno portate al livello 4, ma il livello 4 includerà anche le sue aggiunte uniche. Sezioni quali Variabili font, Controlli di rendering font, Supporto font a colori, Proprietà font di baseeLe risorse di carattere conterranno oggetti nuovi di zecca che molti sviluppatori troveranno utili.
Il particolare tipo di carattere reso è determinato dal famiglia di font e altre proprietà dei font che si applicano a un dato elemento, come font-weight e stile del font per esempio. Questa struttura consente alle impostazioni di variare indipendentemente l'una dall'altra e ciò che comprende Proprietà dei font di base. Quindi cosa è previsto per questo gruppo?
.element font-min-size: 0.875rem; font-max-size: 5rem;
Di tutto ciò che è delineato nel livello 4, queste due proprietà sono le mie preferite perché entrambe consentiranno l'elemento dimensione del font diventare "serrato" tra i valori forniti. Questa è certamente una notizia fantastica per i fan del design reattivo. I valori possono essere una dimensione assoluta, una dimensione relativa o una percentuale di lunghezza.
Al momento non è disponibile alcuna documentazione che rileva come l'evento di ridimensionamento del browser attiva una delle due proprietà e se stai cercando di sperimentare questa funzione utilizzando il flag delle funzionalità della piattaforma web sperimentale in Chrome sei sfortunato.
La maggior parte degli elementi delineati in questa sezione aiuta a controllare aspetti che riguardano il recupero, il riferimento e la visualizzazione della famiglia di font di tua scelta.
@ font-face font-display: auto | blocco | scambiare | fallback | opzionale;
Questa proprietà determina la modalità di visualizzazione di un carattere, in base a se e quando è stato scaricato e pronto per essere utilizzato dal browser. È anche destinato all'uso all'interno del tuo @ Font-face o @-feature-valori di font dichiarazione.
Accentsconagua
auto: Il criterio di visualizzazione dei caratteri è definito dall'utente definito dall'utente (ad esempio il browser), a meno che non sia definito esplicitamente all'interno del CSS.bloccare: Fornisce al carattere un breve periodo di blocco (nella maggior parte dei casi è consigliato 3 secondi) e un periodo di scambio infinito.scambiare: Fornisce al carattere un periodo di blocco di 0 secondi e un periodo di scambio infinito.ricaderci: Dà al font una faccia estremamente piccola (100ms o meno è raccomandato nella maggior parte dei casi) e un breve periodo di swap (3s è raccomandato nella maggior parte dei casi).opzionale: Fornisce al carattere un periodo di blocco estremamente piccolo (100ms o meno è raccomandato nella maggior parte dei casi) e un periodo di scambio 0s.Per chiunque presti molta attenzione alle prestazioni dei font web e chi è impegnato quotidianamente a discutere FOUT o Foit, allora questa proprietà ti farà estremamente piacere.
@ font-feature-values font-display: auto | blocco | scambiare | fallback | opzionale;
quando font-Display è omesso in a @ Font-face regola, lo user agent usa il font-Display valore impostato tramite @-feature-valori di font per il pertinente famiglia di font se ne è impostato uno, altrimenti viene impostato automaticamente font-display: auto. Vedi la precedente spiegazione riguardo font-Display valori.
Il set di regole è perfetto per i casi in cui un font viene offerto tramite una terza parte e non hai il controllo su @ Font-face regole, ma sono ancora in grado di impostare un valore predefinito font-Display politica per il fornito famiglia di font. Questa è una buona notizia per quei cantieri con azioni non-stop di terzi.
@ font-feature-values font-family: "Custom Font Name", sans-serif; font-display: fallback;
Sebbene sia ancora nuovo e alquanto vago, posso solo assumere per controllare un particolare famiglia di font mostra il comportamento, lo sviluppatore deve usare il famiglia di font proprietà all'interno di questo set di regole al fine di indirizzare il carattere desiderato. Ancora una volta, questa è solo un'ipotesi da parte mia e non è reale in alcun modo.
Questa sezione è nuova al 100% e specifica per il livello 4. La maggior parte delle funzionalità attualmente documentate riguardano il dimensionamento e le impostazioni di ogni faccia di carattere.
Questa proprietà viene utilizzata al fine di mantenere i tratti stilistici e migliorare la leggibilità a diverse dimensioni ottiche. Con il tipo digitale abbiamo la possibilità di ridimensionare un font a qualsiasi dimensione, ma questo non tiene conto dell'aspetto del tipo in queste dimensioni variabili.
"Il testo che viene reso in diverse dimensioni spesso beneficia di rappresentazioni visive leggermente diverse. Ad esempio, per facilitare la lettura a piccole dimensioni del testo, i tratti sono spesso più spessi con i caratteri di stampa più grandi. Il testo più grande spesso ha una figura più delicata con più contrasto tra tratti più spessi e più sottili. "~ Livello 4 Bozza di lavoro
.element font-optical-sizing: auto | nessuno
auto: Il programma utente può modificare la forma dei glifi in base a dimensione del font e la densità dei pixel dello schermo. Per i caratteri OpenType e TrueType che utilizzano le variazioni di carattere, questo viene spesso fatto usando il opsz variazione del carattere.nessuna: Il programma utente non deve modificare la forma dei glifi per le dimensioni ottiche..element font-variation-settings: normal | []
Questa proprietà fornisce un controllo di basso livello sulle varianti di carattere OpenType o TrueType. È inteso come un modo per fornire l'accesso alle variazioni dei caratteri che non sono ampiamente utilizzati, ma sono necessari per un particolare caso d'uso.
normale: Il testo è strutturato utilizzando le impostazioni predefinite. .element / * nome e numero dell'asse di quattro lettere * / font-variation-settings: "opsz" 0.5;
Il valore di stringa utilizzato nel codice sopra è noto come nome dell'asse a quattro lettere che descrive la funzione che si desidera variare, insieme al valore di variazione che varia tipicamente da 0-1, ma può anche essere un valore negativo dove richiesto. Le variazioni consentite dipenderanno sempre dal tipo di carattere scelto.
I caratteri di colore sono nuovi di zecca al livello 4 e consentono ai file di caratteri di descrivere non solo i contorni che descrivono i bordi dei glifi, ma anche i colori presenti all'interno dei glifi. Perché vorresti utilizzare una di queste funzionalità? Suggerisco di leggere questo articolo di Grace Fussell per aggiornarsi:
.element font-palette: normal | luce | buio |;
Molti formati di file di font a colori consentono di parametrizzare i colori all'interno di glifi. In questi caratteri, i colori sono referenziati dall'indice quando descrivono la geometria di ciascun glifo. Questi indici sono risolti all'interno di una tavolozza attiva corrente utilizzando una tabella di ricerca presente all'interno del carattere. Tuttavia, molti tipi di carattere contengono più tavolozze, ognuna contenente un insieme di colori complementari scelti dal progettista del carattere per fornire risultati visivi piacevoli. Gli sviluppatori possono definire una tavolozza usando il @-tavolozza valori di font regola menzionata nella prossima sezione.
/ * Sintassi * / @ font-palette-values/ * Esempio * / @ font-palette-values Augusta font-family: Handover Sans; tavolozza base: 3; 1: rgb (43, 12, 9); 3: var (- highlight);
Questo rappresenta una tavolozza di colori usati in un font. Definisce una tavolozza di colori e associa quella palette di colori con un font specifico. Ciò consente a un autore Web di selezionare colori arbitrari da utilizzare all'interno di un font a colori anziché limitarsi alle tavolozze preesistenti all'interno dei file di carattere
base-palette: Questo descrittore specifica una tavolozza nel carattere che la regola contenente @ font-palette-values utilizza come valore iniziale. Se no .element font-family: 'Custom Font Name'; font-presentation: auto | testo | emoji;
Questa proprietà consente agli autori Web di selezionare se la presentazione di emoji o la presentazione del testo viene utilizzata per determinati punti di codice emoji. Una grande vittoria per i fanatici delle emoji 😎
Ci sono sicuramente un sacco di nuove interessanti funzionalità che arrivano lungo la pipeline per i caratteri web e vi incoraggio a iniziare a sperimentare con i vostri preferiti non appena disponibili. Se hai un particolare favorito dal livello 4 o addirittura dal livello 3, comunicacelo nei commenti, incluse le opinioni che potresti avere riguardo alle funzioni di cui abbiamo discusso.
!
