DevToolPal
IT

Generatore di font stack CSS

Crea uno stack font-family CSS multipiattaforma con font di sistema, fallback per cinese, giapponese e coreano ed emoji.

Eseguito in locale, mai caricato

Opzioni

Virgolette

CSS

0 caratteri · 0 B

Cosa fa questo strumento

Il generatore di font stack CSS crea un valore font-family pronto da incollare, usando font già installati sui dispositivi dei tuoi visitatori. Scegli uno stile, come il font nativo dell’interfaccia di sistema, un neo-grotesque come Inter e Helvetica, un serif transizionale come Charter o un monospace adatto al codice, e lo strumento elenca il font migliore per ogni piattaforma nell’ordine giusto.

Gli stack seguono la nota raccolta Modern Font Stacks, più il classico stack -apple-system, BlinkMacSystemFont, "Segoe UI" che molti siti usano ancora. Puoi aggiungere fallback per testo in cinese semplificato, cinese tradizionale, giapponese, coreano, arabo, thailandese o hindi, e font emoji a colori in fondo.

Come si usa

  1. Scegli un Font stack. L’anteprima a sinistra mostra come appare sul dispositivo che stai usando in questo momento; puoi modificarne il testo per provare le tue parole.
  2. Scegli i Font per altre scritture se le tue pagine contengono testo in cinese, giapponese, coreano, arabo, thailandese o hindi.
  3. Attiva o disattiva Aggiungi font emoji.
  4. Scegli un Output: una semplice dichiarazione font-family, una custom property CSS, una voce fontFamily per Tailwind o un semplice elenco.
  5. Copia il risultato o scaricalo come file .css.

I nomi che contengono spazi o iniziano con una cifra vengono messi tra virgolette automaticamente; le parole chiave CSS come system-ui e sans-serif non vengono mai racchiuse tra virgolette, perché così diventerebbero nomi di font inesistenti.

Esempio

UI di sistema con fallback per il cinese semplificato:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Suggerimenti

  • Usa uno stack per il testo e uno stack monospace per il codice: due stack di sistema non costano nulla da caricare.
  • L’anteprima dipende dai font installati sul tuo dispositivo, quindi controlla la pagina anche su Windows e su uno smartphone.
  • Se in seguito aggiungi un web font, mettilo per primo nell’elenco e tieni lo stack di sistema come fallback.

Domande frequenti

› Cos'è un font stack?

Un elenco di famiglie di font nella proprietà CSS font-family. Il browser usa il primo font installato sul dispositivo e, se manca, passa al successivo, fino a una famiglia generica come sans-serif.

› Perché aggiungere font cinesi, giapponesi o coreani?

I font occidentali come Inter o Charter non contengono glifi CJK. Elencare PingFang SC, Microsoft YaHei o Noto Sans SC prima della famiglia generica fa sì che il testo cinese usi un font in stile coerente, invece di quello che sceglie il sistema. Lo stesso vale per arabo, thailandese e hindi (devanagari). Russo, ucraino, greco, vietnamita, turco, polacco e le altre lingue in alfabeto latino o cirillico non richiedono nulla in più: i font di sistema e Noto presenti in ogni stack li coprono già.

› Perché i font emoji sono elencati dopo sans-serif?

I font emoji coprono solo le emoji. Metterli in fondo garantisce che lettere e cifre normali non vengano mai mostrate con un font emoji, mentre le emoji ottengono comunque glifi a colori su ogni piattaforma.

› Questi stack richiedono il download di web font?

No. Ogni stack usa font già inclusi in Windows, macOS, iOS, Android o nelle distribuzioni Linux più comuni, quindi le pagine si caricano senza alcuna richiesta di font.