- Guida utente di Adobe Fonts
- Introduzione
- Licenze per font
- Licenze per font
- Gestire l'account
- Licenza per i clienti Creative Cloud for enterprise
- Aggiunta di licenze per font al tuo account
- Rimozione di font dalla libreria dell’abbonamento
- Adobe Fonts non disponibile per gli Adobe ID registrati in Cina
- Perché questi font non sono inclusi nel mo abbonamento a Creative Cloud?
- Rimozione dei font Morisawa settembre 2021
- Ottenere e usare i font
- Utilizzo di Adobe Fonts nelle app Creative Cloud
- Gestione dei font
- Risoluzione dei problemi relativi ai font mancanti nelle applicazioni desktop
- Utilizzo dei font in InDesign
- Font e composizione tipografica
- Utilizzo dei font per web nei documenti per l’area di lavoro HTML5
- Utilizzo dei font in InCopy
- Utilizzo dei font per web in Muse
- Creazione dei file di font
- Guida alla risoluzione dei problemi: aggiunta di font
- I font aggiunti non vengono visualizzati nel menu dei font
- "Impossibile aggiungere uno o più font" o "Un font con lo stesso nome è già installato"
- Cosa succede quando il font che sto usando è aggiornato dalla foundry?
- Progetti Web e sviluppo
- Aggiunta di font al tuo sito Web
- Guida alla risoluzione dei problemi: aggiunta di font al tuo sito Web
- Risoluzione dei problemi relativi ai font
- Utilizzo dei font per web in newsletter o e-mail HTML
- Utilizzo dei font per web con Accelerated Mobile Pages (AMP)
- Selettori CSS
- Personalizza le prestazioni dei font per web con le impostazioni di visualizzazione dei font
- Codici di incorporamento
- Suddivisione dinamica in sottoinsiemi e utilizzo dei font per web
- Eventi font
- Perché i miei font per web provengono da use.typekit.net?
- Il sito non può connettersi a use.typekit.net
- Utilizzo dei font per web con CodePen
- Supporto di browser e sistemi operativi
- Domini
- Utilizzo dei font per web per lo sviluppo locale
- Policy di protezione dei contenuti
- Stampa dei font per web
- Supporto per le lingue e funzioni OpenType
- Tecnologia dei font
Il codice di incorporamento è il modo in cui i font per web vengono caricati nel tuo sito Web nel browser o in un'e-mail HTML nel client di posta elettronica.
L'impostazione predefinita e i codici di incorporamento @import utilizzano solo il CSS per il caricamento dei font (non JavaScript); possono essere usati per aggiungere font a pagine Web,e-mail HTML o newsletter,Google AMP e molti altri tipi di progetti in cui sono supportati i font per web. Il caricamento dei font JavaScript viene utilizzato per la suddivisione dinamica in sottoinsiemi, richiesta per la distribuzione di font per web dell'Asia orientale.
Il codice di incorporamento per ognuno dei tuoi progetti può essere reperito sulla pagina dei progetti Web.
Codice di incorporamento predefinito
Il codice di incorporamento predefinito è un singolo tag <link> che carica il CSS del progetto Web dalla rete dei font (use.typekit.net) nel browser.
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
Per trovare il codice di incorporamento predefinito per il tuo progetto, visita la pagina dei progetti Web. Aggiungi il codice di incorporamento al tag <head> del tuo sito Web.
Codice di incorporamento @import
Il codice ci incorporamento @import può essere utilizzato direttamente nel foglio di stile CSS. Per trovare il codice di incorporamento @import per un progetto, visita la pagina dei progetti Web, quindi fai clic sull'opzione "@import link"
Aggiungilo tra i tag style nel tag <head> del tuo sito Web:
<style>
@import url("https://use.typekit.net/xxxxxxx.css");
</style>
o posizionalo all'inizio del file CSS:
Se utilizzi il codice di incorporamento @import deve trovarsi all'inizio del tag <style> o nel file CSS con tutte le altre istruzioni @import oppure i font non verranno caricati. È consentito elencare solo una voce @charset prima delle righe @import.
L'uso di una delle opzioni del codice di incorporamento CSS significa che il resto della pagina potrebbe non essere visualizzato fino al termine del caricamento del CSS dei font per web. Il comportamento varia tra i browser, a seconda di come ognuno di gestisce i file CSS esterni.
Per il caricamento asincrono dei font che non blocca il resto della pagina, includere un'altra libreria JavaScript insieme al codice di incorporamento CSS per personalizzare il caricamento dei font.
Codice di incorporamento JavaScript
Il codice di incorporamento JavaScript è richiesto per la suddivisione dinamica in sottoinsiemi, utilizzata per la distribuzione di font per web dell'Asia orientale.
<script>
(function(d) {
var config = {
kitId: 'xxxxxxx',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
Il codice di incorporamento JavaScript per un progetto dinamico è elencato nella pagina dei progetti Web.
Il codice di incorporamento avanzato può essere personalizzato passando un oggetto di configurazione al metodo Typekit.load; consulta la sezione dell'API JavaScript per i dettagli.
API JavaScript
JavaScript espone una variabile globale Typekit con un caricamento di metodo pubblico. Richiamare "Typekit.load" senza argomenti attiverà il caricamento dei font.
Typekit.load()
Puoi anche passare un oggetto di configurazione a Typekit.load.
Typekit.load({
// configuration…
});
È possibile specificare le seguenti chiamate:
- Caricamento in corso - Questa chiamata viene attivata quando vengono richiesti tutti i font.
- attivo - Questa chiamata viene attivata quando i font sono stati sottoposti a rendering.
- inattivo - Questa chiamata viene attivata quando il browser non supporta i font collegati *oppure* se non è possibile caricare alcun font.
- fontloading - Questa chiamata viene attivata una volta per ogni font caricato. La chiamata viene attivata con il nome della famiglia come primo argomento e la descrizione della variazione del font come secondo argomento.
- fontactive - Questa chiamata viene attivata una volta per ogni font sottoposto a rendering. La chiamata viene attivata con il nome della famiglia come primo argomento e la descrizione della variazione del font come secondo argomento.
- fontinactive - Questa chiamata viene attivata se il font non può essere caricato. La chiamata viene attivata con il nome della famiglia come primo argomento e la descrizione della variazione del font come secondo argomento.
Modifica del codice di incorporamento in un sito Web
Se hai un sito Web che utilizza già i font tramite un codice di incorporamento JavaScript precedente, puoi passare alla versione CSS più recente sostituendo i tag <script> nel codice con il codice di incorporamento HTML<link> o il codice di incorporamento CSS@import.
Utilizzo del codice di incorporamento precedente in un sito Web
Sebbene Adobe modifichi occasionalmente le opzioni del codice di incorporamento mentre apportiamo miglioramenti alla distribuzione dei font, tutte le versioni precedenti dei codici di incorporamento continueranno a funzionare.
Se stai usando un codice di incorporamento precedente nel tuo sito Web, non è necessario modificarlo. Tuttavia, molti siti Web trarranno vantaggio dai miglioramenti delle prestazioni effettuando l'aggiornamento a una versione più recente.
Le versioni precedenti del codice di incorporamento includono una versione JavaScript che carica il file CSS in modo asincrono:
<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
e una versione JavaScript relativa al protocollo:
<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
(Anche se il tuo sito utilizza il codice di incorporamento relativo al protocollo, la distribuzione dei font utilizza HTTPS per tutte le richieste).
Utilizzo di più codici di incorporamento in un sito Web
Non consigliamo di aggiungere più di un codice di incorporamento alla stessa pagina Web per diversi motivi:
- Ogni copia del codice di incorporamento è per lo più ridondante.
- Ogni progetto effettua richieste separate per i font, il che aumenta il numero di richieste HTTP e rallenta ulteriormente il caricamento.
- Un singolo progetto può essere memorizzato nella cache in tutte le pagine del tuo sito dopo il primo caricamento.
