Come caricare file di font autoalimentati se il servizio GoogleFont non è disponibile?

Desidero utilizzare una raccolta di caratteri dalla directory di Google Fonts. Ho selezionato gli stili e incluso il tag CSS link nel modello del mio progetto.Come caricare file di font autoalimentati se il servizio GoogleFont non è disponibile?

In alternativa, con Google Fonts è anche possibile scaricare la raccolta e ciò che si ottiene è un file zip con tutti gli stili del carattere.

Posso creare un equivalente CSS di quello che Google mi ha fornito per includere nell'HTML, quindi voglio fornire i file di font auto-ospitati come fallback, se il visitatore non può accedere all'API dei font di Google.

Come si configura e impedendo il download del file di carattere di Google e del file di carattere autoportante? Se l'utente ha accesso a Google Fonts, il suo browser non dovrebbe scaricare la versione autoportante del font.

fonte

2012-07-16 Armando Pérez Marqués

Penso che si possa semplicemente seguire il percorso 'url()' con un percorso 'local()' nella regola 'src' - il browser dovrebbe smettere di cercare quando ne trova uno che può caricare. Non ho provato, però. –

Secondo le specifiche: "Quando è necessario un font, l'agente utente esegue l'iterazione sul set di riferimenti elencati, utilizzando il primo che può essere attivato con successo." - http://www.w3.org/TR/css3-webfonts/#descdef-src –

Questa è un'opinione, non una risposta: penso che tu stia pensando troppo. Vorrei solo specificare un font di sistema fallback nel tuo CSS nel caso in cui i font di Google non vengano caricati. In primo luogo, sei davvero preoccupato che i server di Google non siano disponibili? E secondo, il tuo sito è ancora utilizzabile senza il carattere web specificato? (Probabilmente dovrebbe essere) – chipcullen

Hai 3 opzioni:

Utilizzare 2 set di @font-face a-regole, utilizzando diversi font-family nomi (ad esempio "Droid Sans" e "Droid Sans Local"), e quindi utilizzando una pila font come "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif. Tuttavia, ciò causerà il download di entrambi i font, aumentando il tempo di caricamento.
Utilizzare un set singolo di @font-face a regole, ma utilizzare 2 set di attributi src. Anche questo potrebbe aumentare il tempo di caricamento se il browser decide di scaricare tutti i file di font specificati.
Effettua il mirroring a livello di rete tramite DNS, come fa la maggior parte dei CDN. Ciò richiede l'impostazione della rete, ma il tuo CSS sarebbe invariato, ed è più trasparente per il browser, che non richiede download aggiuntivi.

Google Web Fonts utilizza già la terza opzione, quindi personalmente non mi preoccuperei se si sta già utilizzando una fonte ospitata da CDN. Ma potrebbe essere utile se stai usando font da una fonte meno affidabile. Ma se hai intenzione di passare allo sforzo di impostare questo per i tuoi font, perché non configurarlo per tutte le risorse statiche (immagini, fogli di stile, JS, ecc.)? La cosa più logica da fare è semplicemente ottenere un CDN libero o pagato per ospitare tutte le risorse statiche.

fonte

2012-07-16 14:52:14

Beh, in realtà ha senso, ospitare tutto su una rete CDN, inclusi i caratteri. Dovrei controllare se la licenza del font lo consente. –

Consiglierei solo auto hosting. Questa è fontsprings' sintassi font-face "a prova di proiettile".

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
}

Avere tutti e quattro questi set garantirà che funzioni attraverso i browser. Assicurati di avere il tuo font in tutti e quattro i tipi. Font Squirrel ha anche ottimi kit per fontface.

fonte

2012-07-16 21:56:16

Come caricare file di font autoalimentati se il servizio GoogleFont non è disponibile?

risposta

Problemi correlati