Guida utente Annulla

Selettori CSS

  1. Guida utente di Adobe Fonts
  2. Introduzione
    1. Requisiti di sistema e di abbonamento
    2. Supporto di browser e sistemi operativi
    3. Aggiunta dei font sul computer
    4. Aggiunta di font al tuo sito Web
    5. Aggiunta dei font in CC Mobile
  3. Licenze per font
    1. Licenze per font
    2. Gestire l'account
    3. Licenza per i clienti Creative Cloud for enterprise
    4. Aggiunta di licenze per font al tuo account
    5. Rimozione di font dalla libreria dell’abbonamento
    6. Adobe Fonts non disponibile per gli Adobe ID registrati in Cina
    7. Perché questi font non sono inclusi nel mo abbonamento a Creative Cloud?
    8. Rimozione dei font Morisawa settembre 2021
  4. Ottenere e usare i font
    1. Utilizzo di Adobe Fonts nelle app Creative Cloud
    2. Gestione dei font
    3. Risoluzione dei problemi relativi ai font mancanti nelle applicazioni desktop
    4. Utilizzo dei font in InDesign
    5. Font e composizione tipografica
    6. Utilizzo dei font per web nei documenti per l’area di lavoro HTML5
    7. Utilizzo dei font in InCopy
    8. Utilizzo dei font per web in Muse
    9. Creazione dei file di font
    10. Guida alla risoluzione dei problemi: aggiunta di font
    11. I font aggiunti non vengono visualizzati nel menu dei font
    12. "Impossibile aggiungere uno o più font" o "Un font con lo stesso nome è già installato"
    13. Cosa succede quando il font che sto usando è aggiornato dalla foundry?
  5. Progetti Web e sviluppo
    1. Aggiunta di font al tuo sito Web
    2. Guida alla risoluzione dei problemi: aggiunta di font al tuo sito Web
    3. Risoluzione dei problemi relativi ai font
    4. Utilizzo dei font per web in newsletter o e-mail HTML
    5. Utilizzo dei font per web con Accelerated Mobile Pages (AMP)
    6. Selettori CSS
    7. Personalizza le prestazioni dei font per web con le impostazioni di visualizzazione dei font
    8. Codici di incorporamento
    9. Suddivisione dinamica in sottoinsiemi e utilizzo dei font per web
    10. Eventi font
    11. Perché i miei font per web provengono da use.typekit.net?
    12. Il sito non può connettersi a use.typekit.net
    13. Utilizzo dei font per web con CodePen
    14. Supporto di browser e sistemi operativi
    15. Domini
    16. Utilizzo dei font per web per lo sviluppo locale
    17. Policy di protezione dei contenuti
    18. Stampa dei font per web
  6. Supporto per le lingue e funzioni OpenType
    1. Suddivisione in sottoinsiemi e supporto della lingua
    2. Utilizzo delle funzioni OpenType
    3. Sintassi per le funzioni OpenType in CSS
  7. Tecnologia dei font
    1. Font a colori OpenType-SVG
    2. Ten Mincho: punti importanti sull'aggiornamento dalla versione 1.000

I selettori CSS indicano al browser dove applicare i font per web che stai utilizzando, nonché lo spessore e lo stile del font da utilizzare per il testo.

Utilizzo dei nomi delle famiglie di font nel CSS

La pagina dei progetti Web elenca il nome della famiglia di font CSS, lo spessore numerico e lo stile di ciascun font del progetto. Fare clic sul collegamento "Modifica progetto" per visualizzare i dettagli del CSS di ogni progetto.

Dopo aver incluso il codice di incorporamento nel documento, utilizza questi nomi di famiglie di font nel CSS per applicare i font al testo. Ad esempio:

h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Specifica dei font alternativi

Se il browser di un utente non supporta i font per web o non vengono caricati per qualsiasi motivo, nello stack CSS verranno utilizzati i font alternativi.

Lo stack dei font deve contenere almeno un font alternativo disponibile uniformemente su tutte le piattaforme (come Georgia o Arial), seguito da un nome generico di famiglia di font (come serif o sans-serif). Se il browser non riesce a trovare il primo font, proverà il secondo font e così via.

Utilizzo di più spessori e stili

È possibile specificare uno spessore dei font diverso da "normale" e "grassetto" utilizzando i valori degli spessori numerici nel CSS. I valori numerici più frequenti corrispondono a questi spessori:

  • 100 = sottile
  • 200 = extra leggero
  • 300 = leggero
  • 400 = normale, libro
  • 500 = medio
  • 600 = semi-grassetto
  • 700 = grassetto
  • 800 = pesante
  • 900 = nero

Puoi trovare i valori numerici per tutti i font nel tuo progetto nella pagina dei progetti Web.

Ad esempio, utilizza questo CSS per applicare lo spessore 700 di un font all'elemento h1:

h1 {
  font-weight: 700;
}

Utilizzo di nomi specifici per le varianti in Internet Explorer 8

Internet Explorer 8 carica un massimo di quattro spessori per famiglia e l'utilizzo di due spessori strettamente correlati (ad esempio 600 e 700) può comportare il caricamento corretto di un solo spessore. Adobe Fonts fornisce nomi di famiglie di font specifici per le varianti a queste versioni del browser per gestire entrambi questi bug.

Il nome specifico per le varianti deve essere aggiunto all'inizio di uno stack di famiglia di font secondo necessità, prima del nome principale della famiglia:

#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

I nomi sono costituiti dal normale nome della famiglia di font, seguito da un trattino, seguito da una descrizione della variante del font (o FVD). Ad esempio, il nome specifico della variante per brandon-grotesque che contiene il font di spessore 700 è brandon-grotesque-n7.

Il nome specifico della variante non sarà definito nei browser che non presentano questi problemi, che quindi useranno il nome completo della famiglia che si trova al secondo posto nello stack.

La maggior parte degli utenti non avrà bisogno di utilizzare questi nomi di famiglia di font aggiuntivi. Dovrai solo aggiungerli se riscontri problemi con i font visualizzati correttamente in particolare in Internet Explorer 8.

Ottieni supporto in modo più facile e veloce

Nuovo utente?