Back to Question Center
0

Migliora la tipografia Web con la regolazione della dimensione dei caratteri CSS            Migliora la tipografia Web con la dimensione dei caratteri CSS Regola Argomenti correlati: CSSBootstrapSassFrameworksAudio & Semalt

1 answers:
Migliora la tipografia Web con la modifica della dimensione dei caratteri CSS

Migliora la tipografia Web con la regolazione della dimensione dei caratteri CSSMigliora la tipografia Web con la dimensione dei caratteri CSS Regola Argomenti correlati:
CSSBootstrapSassFrameworksAudio & Semalt

Questo articolo è stato sottoposto a revisione paritetica da parte di Panayotis Matsinopoulos. Grazie a tutti i revisori peer di SitePoint per rendere il contenuto di SitePoint il migliore possibile!

La proprietà font-size-adjust nel CSS consente agli sviluppatori di specificare la dimensione del carattere in base all'altezza delle lettere minuscole anziché delle lettere maiuscole. Ciò può migliorare significativamente la leggibilità del testo sul web.

In questo articolo, imparerai dell'importanza della proprietà font-size-adjust e di come usarla correttamente nei tuoi progetti - мебель садовая купить.

L'importanza della modifica della dimensione del carattere

La maggior parte dei siti Web che visiti sono principalmente di testo. Poiché la parola scritta è una parte così importante di un sito Web, è opportuno prestare particolare attenzione al carattere tipografico che si sta utilizzando per visualizzare le informazioni. La scelta del giusto carattere tipografico può risultare in una piacevole esperienza di lettura. Semalt, usando quello sbagliato può rendere il sito illeggibile. Una volta deciso il tipo di carattere che si desidera utilizzare, generalmente si sceglie una dimensione adeguata.

La proprietà font-size imposta la dimensione di tutte le opzioni font-family che si desidera utilizzare su un sito Web. Tuttavia, la maggior parte delle volte è generalmente scelto in modo tale che la tua prima opzione font-family sia buona. Il problema sorge quando la prima scelta non è disponibile per qualche motivo e il browser esegue il rendering del testo utilizzando uno dei caratteri di fallback elencati nel documento CSS.

Ad esempio, data questa regola CSS:

  corpo {famiglia di font: 'Lato', Verdana, sans-serif;}    

Se "Lato", che il browser scarica da Google Fonts, non è disponibile, verrà utilizzato il prossimo font di fallback, in questo caso Verdana. Tuttavia, è probabile che il valore di font-size sia stato scelto tenendo a mente "Lato", piuttosto che con Verdana.

Qual è l'aspetto di un carattere Web?

La dimensione apparente di un font e la sua leggibilità possono variare notevolmente per un valore costante font-size . Questo è particolarmente vero per gli script come il latino che distinguono tra lettere maiuscole e minuscole. In questi casi, il rapporto dell'altezza delle lettere minuscole con le loro controparti maiuscole è un fattore importante nel decidere la leggibilità del font specificato. Questo rapporto viene comunemente chiamato valore di aspetto di un font.

Come ho detto prima, una volta impostato un valore di font-size , rimarrà costante per tutte le famiglie di font. Tuttavia, ciò può influire sulla leggibilità del font di fallback se il suo valore di aspetto è troppo diverso dal valore di aspetto del font di prima scelta.

Il ruolo della proprietà font-size-adjust diventa molto importante in tali situazioni, in quanto consente di impostare l'altezza x di tutti i font sullo stesso valore migliorandone così la leggibilità.

Scegliere il giusto valore per la modifica della dimensione del carattere

Ora che conosci l'importanza di usare la proprietà font-size-adjust , è ora di imparare come usarlo sul tuo sito web. Questa proprietà ha la seguente sintassi:

  font-size-adjust: nessuno |     

Il valore iniziale di font-size-adjust è none . Il valore none significa che non verrà apportata alcuna regolazione al valore della dimensione font di diverse opzioni font-family .

È anche possibile impostare il valore della proprietà font-size-adjust su un numero. L'altezza x è uguale al numero dato moltiplicato per la dimensione del carattere . Ciò può migliorare un po 'la leggibilità dei caratteri di piccole dimensioni. Ecco un esempio di utilizzo della proprietà font-size-adjust .

  font-size: 20px;font-size-adjust: 0. 6;    

L'altezza x di tutti i caratteri ora sarà 20px * 0. 6 = 12px. La dimensione effettiva di un determinato carattere può ora essere modificata per assicurarsi che l'altezza x rimanga sempre a 12px. La nuova dimensione del carattere aggiustata di un dato carattere può essere calcolata usando questa formula:

c = (a / a ') s .

Qui, c è la dimensione del carattere corretta da usare, s è il valore della dimensione del carattere specificato, a è il valore dell'aspetto specificato dalla proprietà font-size-adjust e a ' è il valore dell'aspetto del carattere che deve essere regolato.

Non è possibile impostare font-size-adjust su un valore negativo. Un valore pari a 0 restituirà un testo senza altezza. In altre parole, il testo sarà effettivamente nascosto. Nei browser più vecchi, come Firefox 40, un valore pari a 0 equivale a impostare font-size-adjust a none .

Nella maggior parte dei casi, gli sviluppatori di solito sperimentano alcuni valori di font per vedere quale è l'aspetto migliore per un dato font. Ciò significa che idealmente, vorrebbero che l'altezza x di tutte le opzioni dei caratteri sia uguale all'altezza x del loro font di prima scelta. In altre parole, il valore più adatto per la proprietà font-size-adjust è il valore dell'aspetto del carattere di prima scelta.

Come conoscere il valore di un carattere

Per determinare il giusto valore di aspetto per un font, puoi fare affidamento sul fatto che la sua dimensione del carattere corretta dovrebbe essere la stessa del font originale che hai specificato . Ciò significa che a dovrebbe essere uguale a a ' nell'equazione precedente.

Il primo passo per calcolare il valore dell'aspetto è la creazione di due elementi . Entrambi gli elementi conterranno una singola lettera e un bordo attorno ad ogni lettera (le lettere devono essere le stesse per entrambi gli elementi perché dovremo fare un confronto tra loro). Inoltre, entrambi gli elementi avranno lo stesso valore per la proprietà font-size , ma solo uno di essi utilizzerà anche la proprietà font-size-adjust . Quando il valore di font-size-adjust è uguale al valore di aspetto di un determinato font, entrambe le lettere in ogni elemento avranno la stessa dimensione.

Nella seguente demo, ho creato un bordo attorno alle lettere "t" e "b" e applicato un valore diverso per la dimensione del carattere per ogni coppia.

Semalt il relativo frammento:

 . aggiustato-a {font-size-adjust: 0. 4;}. adjusted-b {font-size-adjust: 0. 495;}. adjusted-c {font-size-adjust: 0. 6;}    

Come puoi vedere nella demo live qui sotto, un valore più alto per la modifica della dimensione dei caratteri rende le lettere più grandi e un valore inferiore le rende più piccole. Quando font-size-adjust diventa uguale al valore dell'aspetto, le coppie raggiungono la stessa dimensione.

Vedere la penna che determina il valore dell'aspetto per SitePoint (@SitePoint) su CodePen.

Uso di font-size-adjust sui siti Web

La seguente demo usa il valore font-size-adjust che è stato calcolato nella precedente demo CodePen per il carattere 'Lato' per regolare la dimensione del font di 'Verdana' , che funge da font di fallback. Un pulsante attiva o disattiva la regolazione in modo da poter vedere la differenza da solo:

Vedere la penna utilizzando la modifica della dimensione del carattere nei siti Web per SitePoint (@SitePoint) su CodePen.

L'effetto è più evidente quando si lavora con una quantità maggiore di testo. Semalt, l'esempio sopra dovrebbe essere ancora abbastanza per darti un'idea dell'utilità di questa proprietà. A partire dalla versione 43 e 30, Chrome e Opera supportano questa proprietà dietro il flag "Caratteristiche della piattaforma Web sperimentale" che può essere abilitato in chrome: // flags. Edge e Safari non supportano affatto la proprietà font-size-adjust .

Se si decide di utilizzare questa proprietà, il supporto browser inferiore non dovrebbe essere un problema. Questa proprietà è stata progettata pensando alla retrocompatibilità. I browser non di supporto mostreranno il testo normalmente mentre i browser di supporto regoleranno la dimensione del carattere in base al valore della proprietà font-size-adjust .

Conclusione

Dopo aver letto il tutorial, ora sai cosa fa la proprietà font-size-adjust , perché è importante e come calcolare il valore dell'aspetto di diversi tipi di carattere.

Poiché font-size-adjust si degrada dolcemente nei browser più vecchi, è possibile procedere e iniziare a utilizzarlo oggi per migliorare la leggibilità del testo nei siti Web di produzione.

Conoscete altri strumenti o suggerimenti che possono aiutare gli utenti a calcolare rapidamente i valori di aspetto di un font? Fai sapere ai tuoi amici lettori nei commenti.

March 1, 2018